CSS에서 border-radius 속성을 사용하면 버튼을 원형 또는 둥근 형태로 쉽게 만들 수 있습니다. 요소의 너비와 높이를 동일하게 설정한 후 border-radius: 50%를 적용하면 완전한 원형 버튼이 완성됩니다.
아래 예제는 두 개의 원형 버튼을 만들고, 마우스를 올렸을 때(hover) 색상이 변하도록 스타일을 지정한 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
a {
text-decoration: none;
display: inline-block;
padding: 18px;
font-size: 35px;
width: 60px;
height: 60px;
text-align: center;
}
.btn1:hover {
background-color: #ddd;
color: black;
}
.btn2:hover {
background-color: rgb(121, 37, 133);
color: white;
}
.btn1 {
border-radius: 50%;
background-color: #acacac;
color: black;
}
.btn2 {
border-radius: 50%;
background-color: rgb(68, 30, 112);
color: white;
}
</style>
</head>
<body>
<h1>Style round Button Example</h1>
<a href="#" class="btn1">50%</a>
<a href="#" class="btn2">50%</a>
</body>
</html>코드 설명
- a 선택자: 링크의 밑줄을 제거하고(
text-decoration: none) 인라인 블록으로 표시한 뒤, 패딩과 크기를 지정해 버튼의 기본 형태를 만듭니다. - border-radius: 50%: 모서리를 요소 크기의 절반만큼 둥글게 처리하여 완전한 원형이 되도록 합니다.
- :hover 가상 클래스: 마우스 커서를 올렸을 때 배경색과 글자색이 바뀌도록 하여 사용자에게 시각적 반응을 제공합니다.
실행 결과
위 코드를 실행하면 회색(#acacac) 배경의 원형 버튼 하나와 보라색(rgb(68, 30, 112)) 배경의 원형 버튼 하나가 나란히 표시됩니다. 각 버튼에 마우스를 올리면 배경색이 연한 회색 또는 진한 보라색으로 변경되는 것을 확인할 수 있습니다.