웹사이트를 디자인하다 보면 특정한 모양으로 보이길 원하는 버튼을 자주 만나게 됩니다. 예를 들어, 다른 페이지 요소와 차별화된 배경색을 적용해 사용자의 시선을 버튼에 집중시키고 싶을 수 있습니다.
CSS를 활용하면 개발자는 자유롭게 스타일링된 버튼을 만들 수 있습니다. CSS를 통해 버튼의 색상, 글자 크기, 테두리, 너비, 높이 등 다양한 속성을 변경할 수 있습니다.
이 글에서는 실제 예제와 함께 여러 CSS 속성을 사용해 HTML 버튼을 스타일링하는 방법을 살펴봅니다. 끝까지 읽고 나면 프로처럼 CSS로 버튼을 꾸밀 수 있게 될 것입니다.
버튼의 기본 이해
HTML에서 버튼을 정의하는 방법은 여러 가지가 있지만, 가장 많이 쓰이는 두 가지는 <button> 태그와 <input type="button"> 요소입니다. 두 방식 모두 동일한 형태의 버튼을 생성합니다.
버튼은 HTML 코드로 정의합니다. 아무런 스타일도 적용하지 않은 HTML 버튼은 다음과 같이 생겼습니다.
위 버튼에 사용된 코드는 다음과 같습니다.
<button>Click me</button>
이 버튼은 HTML 기본 스타일을 사용하기 때문에 지금은 다소 밋밋해 보입니다.
버튼의 외관을 커스터마이징하고 싶다면 CSS를 사용해야 합니다. 이 글에서는 버튼에 다음과 같은 작업을 수행하는 방법을 다룹니다.
- 배경색 변경
- 글자색 변경
- 글자 크기 변경
- 패딩 추가
- 둥근 모서리 만들기
- 색상 테두리 추가
- :hover 기능 활용
- 그림자 추가
- 너비 변경
- 버튼 비활성화
- 애니메이션 적용
또한 가로형 및 세로형 버튼 그룹을 만드는 방법도 함께 알아봅니다.
배경색 변경하기
버튼을 디자인할 때 가장 먼저 하는 작업 중 하나가 바로 배경색 설정입니다. 기본적으로 버튼은 흰색 배경에 검은색 글자를 가집니다. CSS의 background-color 속성을 사용하면 버튼의 배경색을 자유롭게 바꿀 수 있습니다.
예를 들어 웹사이트용 버튼에 분홍색 배경을 적용하고 싶다고 가정해 봅시다. 다음 CSS 코드로 버튼 색상을 변경할 수 있습니다.
index.html
<button class="button">Click me</button>
styles.css
.button {
width: 100px;
height: 50px;
background-color: pink;
}
실행 결과:
background-color 속성 덕분에 버튼의 배경이 분홍색으로 바뀌었습니다. 이 속성을 사용하면 어떤 색상이든 자유롭게 지정할 수 있습니다.
글자색 변경하기
버튼의 글자색을 바꾸려면 color 속성을 사용합니다. 분홍색 배경에 초록색 글자를 가진 버튼을 만들고 싶다면 다음 코드처럼 작성하면 됩니다.
index.html
<button class="button">Click me</button>
styles.css
.button {
width: 100px;
height: 50px;
color: green;
background-color: pink;
}
실행 결과:
코드에서 color: green; 속성을 사용해 버튼 내부 텍스트의 색상을 초록색으로 지정했습니다.
글자 크기 조절하기
CSS의 font-size 속성을 사용하면 버튼 안에 들어갈 텍스트의 크기를 정할 수 있습니다. 글자 크기를 20px로 지정하고 싶다면 다음 코드를 활용하세요.
index.html
<button class="button">Click me</button>
styles.css
.button {
width: 100px;
height: 50px;
background-color: blue;
color: white;
font-size: 20px;
}
실행 결과:
버튼 자체의 크기는 그대로지만, 내부 글자 크기가 20px로 커졌습니다. font-size 속성으로 버튼 텍스트의 크기를 설정한 것입니다.
패딩 추가하기
버튼을 디자인할 때 텍스트와 버튼의 외곽 테두리 사이에 일정한 여백을 두고 싶을 때가 있습니다. 이럴 때 필요한 것이 바로 padding 속성입니다.
padding 속성은 px, em 같은 길이 단위나 퍼센트 값을 사용해 버튼 텍스트와 테두리 사이의 간격을 정의합니다.
예를 들어 한 버튼에는 40px 패딩을, 다른 버튼에는 20px 패딩을 적용해 두 개의 버튼을 만들어 보겠습니다.
index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
styles.css
.button1 {
padding: 20px;
font-size: 16px;
background-color: blue;
color: white;
}
.button2 {
padding: 40px;
font-size: 16px;
background-color: blue;
color: white;
}
실행 결과:
첫 번째 버튼은 텍스트와 테두리 사이에 20px의 여백이 있고, 두 번째 버튼은 40px의 여백이 있습니다. 패딩 공간을 충분히 확보하기 위해 이 버튼들에는 너비나 높이 속성을 따로 지정하지 않았습니다(해당 속성은 아래에서 다룹니다).
둥근 모서리 만들기
HTML 버튼은 기본적으로 각진 형태입니다. 하지만 둥근 모서리를 가진 버튼을 원할 수도 있습니다.
border-radius 속성을 사용하면 모서리가 둥근 버튼을 만들 수 있습니다. 아래는 border-radius 속성을 활용한 세 가지 예제입니다. 반지름 크기에 따른 효과 차이를 보여주기 위해 각각 다른 크기를 적용했습니다.
index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>
styles.css
.button1 {
width: 100px;
height: 50px;
background-color: blue;
color: white;
border-radius: 5px;
}
.button2 {
width: 100px;
height: 50px;
background-color: blue;
color: white;
border-radius: 10px;
}
.button3 {
width: 100px;
height: 50px;
background-color: blue;
color: white;
border-radius: 15px;
}
실행 결과:
세 개의 버튼을 만들었으며, border-radius 값이 클수록 모서리가 더 둥글게 표현되는 것을 확인할 수 있습니다.
테두리 색상 지정하기
CSS의 border 속성을 사용하면 버튼에 원하는 색상의 테두리를 추가할 수 있습니다.
예를 들어 버튼의 경계를 명확하게 보여주기 위해 색상 테두리가 있는 버튼을 만들고 싶다면 다음 코드를 사용하세요.
index.html
<button class="button">Click me</button>
styles.css
.button {
background-color: white;
color: black;
border: 3px solid #ffb6c1; /* 연한 분홍색 */
padding: 25px;
}
실행 결과:
이 버튼은 흰색 배경에 검은색 콘텐츠를 가지며, 모든 방향으로 25px의 패딩이 적용되어 있습니다. border 속성으로 버튼 주위에 3px 두께의 실선 테두리를 만들었고, 테두리 색상은 연한 분홍색을 의미하는 헥스 코드 #ffb6c1로 지정했습니다.
border 속성에 대해 더 자세히 알고 싶다면 CSS border 속성 관련 문서를 참고하세요.
호버(Hover) 효과 적용하기
CSS의 :hover 선택자를 사용하면 사용자가 마우스 커서를 버튼 위에 올렸을 때 버튼의 스타일이 변하도록 설정할 수 있습니다.
예를 들어 검은색 글자와 흰색 배경을 가진 버튼에서, 마우스를 올리면 글자색은 흰색으로, 배경색은 초록색으로 바뀌게 하고 싶다고 가정해 봅시다. 다음 코드로 구현할 수 있습니다.
index.html
<button class="button">Click me</button>
styles.css
.button {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
}
.button:hover {
background-color: green;
color: white;
}
실행 결과:
위 이미지의 첫 번째 버튼은 마우스를 올리기 전 상태입니다. 검은색 글자, 분홍색 테두리, 25px 패딩을 가진 흰색 버튼, 즉 버튼의 기본 상태입니다. 하지만 마우스를 올리면 배경색이 초록색으로, 글자색이 흰색으로 바뀝니다.
커서가 버튼에서 벗어나는 즉시 버튼은 다시 기본 상태로 돌아갑니다.
또한 transition-duration 속성을 사용하면 마우스를 올린 후 스타일이 전환되는 데 걸리는 시간을 지정할 수 있습니다. 위 버튼이 1초에 걸쳐 초록색 배경과 흰색 글자로 바뀌게 하려면 다음 코드를 추가하면 됩니다.
.button {
...
transition-duration: 1s;
}
이제 사용자가 버튼에 마우스를 올리면 1초에 걸쳐 부드럽게 변화합니다. CSS 트랜지션에 대해 더 알고 싶다면 초보자용 CSS 트랜지션 가이드를 참고하세요.
그림자 추가하기
CSS의 box-shadow 속성을 사용하면 버튼에 그림자 효과를 줄 수 있습니다. 이 속성은 여러 매개변수를 받으며, 자세한 내용은 CSS box-shadow 튜토리얼에서 확인할 수 있습니다.
예를 들어 드롭 섀도우가 있는 버튼을 만들고 싶다면 다음 코드를 사용하세요.
index.html
<button class="button">Click me</button>
styles.css
.button {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
}
실행 결과:
이 예제에서는 버튼에 그림자를 추가했습니다. 그림자에 지정한 매개변수는 다음과 같습니다.
- x 오프셋은 0으로, 그림자가 버튼 바로 아래에 위치합니다.
- y 오프셋은 10px로, 그림자가 버튼 아래로 10px 연장됩니다.
- 블러 반지름은 10px로, 그림자에 흐림 효과가 적용됩니다.
- 확산 반지름은 0으로, 블러 주변에 확산이 없습니다.
- 그림자 색상은 rgba(0,0,0,0.2)로, 연한 회색입니다.
위 실행 결과에서 볼 수 있듯이 버튼에 이러한 속성들이 모두 적용되어 나타납니다.
너비 조절하기
width 속성으로 버튼의 너비를 정의할 수 있습니다. 기본적으로 버튼의 크기는 텍스트 콘텐츠에 맞춰 결정되지만, width 속성을 사용하면 기본값을 무시하고 특정 너비를 지정할 수 있습니다.
다음은 서로 다른 너비를 가진 세 개의 버튼 예제입니다.
index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>
styles.css
.button1 {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
width: 250px;
}
.button2 {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
width: 50%;
}
.button3 {
background-color: white;
color: black;
border: 3px solid #ffb6c1;
padding: 25px;
width: 100%;
}
실행 결과:
이 예제에서는 서로 다른 너비를 가진 세 개의 버튼을 만들었습니다.
버튼 비활성화하기
버튼을 디자인할 때 화면에는 계속 보이되 비활성화 상태로 유지하고 싶을 수 있습니다. 예를 들어 사용자가 웹 폼의 모든 필드를 작성하기 전까지는 버튼을 누르지 못하게 하는 경우가 대표적입니다.
opacity 속성과 cursor 속성을 함께 사용하면 비활성화된 버튼을 만들 수 있습니다. opacity 속성은 버튼에 투명도를 부여해 비활성화된 것처럼 보이게 합니다. 기본 opacity 값은 1이며, 투명도 없이 색상을 표시합니다. 자세한 내용은 CSS opacity 가이드를 참고하세요.
cursor 속성에 not-allowed 값을 지정하면 버튼이 비활성화됩니다. 이 값이 적용된 버튼 위에 마우스를 올리면 커서가 금지 표시로 나타납니다.
다음은 일반 버튼과 비활성화된 버튼의 코드입니다.
index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
styles.css
.button1 {
background-color: #ffb6c1;
color: black;
padding: 25px;
}
.button2 {
background-color: #ffb6c1;
color: black;
padding: 25px;
border: none;
opacity: 0.5;
cursor: not-allowed;
}
실행 결과:
두 버튼 모두 분홍색(#ffb6c1) 배경을 가집니다. 첫 번째 버튼은 완전히 불투명한 기본 상태로, 정상적으로 작동합니다. 두 번째 버튼은 opacity가 0.5로, cursor가 not-allowed로 설정되어 있어 더 투명하고 작동하지 않는(비활성화된) 버튼으로 표현됩니다.
버튼 그룹 만들기
웹사이트를 개발하다 보면 여러 버튼을 하나의 그룹으로 묶고 싶을 때가 있습니다. 예를 들어 폼을 디자인할 때 저장, 이전 단계, 다음 단계로 이동하는 세 개의 버튼으로 구성된 버튼 그룹을 만들 수 있습니다.
가로형 버튼 그룹
버튼을 나란히 배치하고 싶다면 CSS 버튼 그룹을 만들어야 합니다. 그룹에 포함할 버튼들을 왼쪽으로 float 처리하면 됩니다. CSS float 속성에 대한 자세한 내용은 관련 가이드를 참고하세요. 다음은 가로형 버튼 그룹의 코드 예제입니다.
index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>
styles.css
.button {
background-color: #ffb6c1;
color: black;
padding: 25px;
border: none;
float: left;
}
실행 결과:
세 개의 버튼이 나란히 배치되어 있는 것을 확인할 수 있습니다.
마찬가지로 border 속성을 지정하면 각 버튼이 고유한 테두리를 가진 버튼 그룹을 만들 수 있습니다. 테두리가 있는 버튼 그룹을 만드는 코드는 다음과 같습니다.
index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>
styles.css
.button {
background-color: #ffb6c1;
color: black;
padding: 25px;
border: 2px solid blue;
float: left;
}
실행 결과:
코드에서 각 버튼 주위에 2px 두께의 파란색 실선 테두리를 지정했습니다. 이를 통해 그룹 내 각 버튼을 시각적으로 구분할 수 있습니다.
세로형 버튼 그룹
버튼 그룹을 디자인할 때 버튼을 세로로 배치하고 싶은 경우가 많습니다. 이럴 때 display: block CSS 속성을 사용합니다.
다음은 display: block을 사용해 버튼을 세로로 나열하는 예제입니다.
index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>
styles.css
.button {
background-color: #ffb6c1;
color: black;
padding: 25px;
border: 2px solid blue;
display: block;
}
실행 결과:
웹 브라우저가 이 버튼들을 하나의 그룹으로 묶어 세로 방향으로 표시합니다.
버튼 애니메이션 적용하기
버튼을 디자인할 때 애니메이션을 적용해 인터랙티브한 요소로 만들 수도 있습니다. 아래에서 CSS로 버튼에 애니메이션을 적용하는 몇 가지 방법을 소개합니다.
눌리는(Pressed) 효과
CSS에서는 사용자가 버튼을 클릭했을 때 실제로 버튼이 눌리는 것처럼 보이는 효과를 만들 수 있습니다.
예를 들어 연한 파란색 배경에 진회색 그림자가 있는 버튼이, 클릭 후 0.5초 뒤 분홍색 배경과 연회색 그림자로 바뀌도록 해봅시다. 이렇게 하면 사용자가 실제 버튼을 물리적으로 누르는 느낌을 받을 수 있습니다. 구현 코드는 다음과 같습니다.
index.html
<button class="button">Click me</button>
styles.css
.button {
padding: 20px;
font-size: 15px;
color: white;
background-color: lightblue;
border: none;
transition-duration: 0.5s;
border-radius: 8px;
box-shadow: 0 5px gray;
}
.button:active {
background-color: #ffb6c1;
box-shadow: 0 5px lightgray;
transform: translateY(5px);
}
실행 결과:
왼쪽은 클릭 전 버튼의 모습으로, 연한 파란색 배경에 진회색 박스 그림자가 있습니다. 오른쪽은 클릭 후(지정된 트랜지션 시간이 지난 후) 버튼의 모습으로, 분홍색 배경에 연회색 박스 그림자가 적용되었습니다.
코드를 하나씩 살펴보겠습니다. .button 스타일에서는 다음을 수행합니다.
- 버튼 주위에 20px 패딩을 설정합니다.
- 버튼 텍스트의 글자 크기를 15px로 지정합니다.
- 버튼 텍스트 색상을 흰색으로 지정합니다.
- 버튼 배경색을 연한 파란색으로 지정합니다.
- 버튼의 기본 테두리를 제거합니다.
- 호버 트랜지션 지속 시간을 0.5초로 설정합니다.
- border-radius를 8px로 지정해 둥근 모서리를 만듭니다.
- 버튼 아래에 5px 길이의 회색 박스 그림자를 설정합니다.
이것들은 사용자가 버튼 위에 마우스를 올리지 않았을 때의 스타일입니다. .button:active 스타일에서는 다음을 수행합니다.
- 버튼의 배경색을 연한 분홍색으로 변경합니다.
- 버튼 아래에 5px 길이의 연회색 그림자를 설정합니다.
- translateY() 변환을 적용해 버튼이 눌린 것처럼 보이게 합니다. 이 트랜지션에 대한 자세한 내용은 CSS 2D transforms 가이드를 참고하세요.
이 스타일들을 통해 사용자가 버튼을 클릭했을 때 발생하는 효과를 만들 수 있습니다.
페이드인(Fade-In) 효과
transition 속성과 opacity 속성을 조합하면 버튼에 페이드인 효과를 만들 수 있습니다. :hover 선택자와 함께 사용하면 사용자가 객체(여기서는 버튼) 위에 마우스를 올릴 때 페이드인 효과가 활성화됩니다.
다음은 페이드인 효과가 있는 버튼을 만드는 코드입니다.
.button {
padding: 20px;
font-size: 15px;
color: white;
background-color: lightblue;
border: none;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
border-radius: 8px;
opacity: 0.7;
}
.button:hover {
opacity: 1;
}
실행 결과:
왼쪽 버튼은 더 투명하게 보입니다. opacity 속성 값을 0.7로 설정한 결과입니다.
사용자가 버튼 위에 마우스를 올리면 .button:hover CSS 규칙이 적용되어 버튼의 opacity가 1로 설정됩니다. 이로써 버튼이 완전히 불투명한(투명하지 않은) 상태로 전환됩니다.
마치며
HTML은 웹 페이지에서 버튼의 구조를 정의합니다. 버튼을 정의한 후에는 CSS를 사용해 필요에 맞게 자유롭게 커스터마이징할 수 있습니다.
이 글에서는 다양한 인기 CSS 속성을 활용해 버튼을 스타일링하는 방법을 예제와 함께 살펴봤습니다. 이제 여러분도 프로 웹 개발자처럼 CSS로 버튼을 스타일링할 준비가 되었습니다!