CSS 버튼 — 슬라이더를 움직이면서 코드가 어떻게 바뀌는지 보기
버튼 하나에 필요한 CSS는 열 줄 남짓입니다. 문제는 어느 값을 얼마로 해야 원하는 모양이 나오는지 외우고 있지 않다는 것입니다. 여기서는 밀어 보고, 결과를 보고, 마음에 들면 그 코드를 가져가면 됩니다.
이 도구가 만드는 것은 규칙 세 개입니다. 버튼 자체, 마우스를 올렸을 때, 그리고 키보드로 이동해 왔을 때입니다. 화면의 미리보기와 아래의 코드는 같은 목록에서 나오기 때문에, 보이는 것이 곧 복사되는 것입니다.
값을 바꾸는 방법은 두 가지입니다. 프리셋을 골라 시작점을 잡고, 슬라이더로 다듬습니다. 프리셋은 항상 기본값 위에 적용되므로 앞서 고른 프리셋의 값이 남지 않습니다.
어떤 값이 무엇을 바꾸나
| 속성 | 하는 일 | 감각적인 기준 |
|---|---|---|
| padding | 글자와 테두리 사이 여백 | 상하 12px, 좌우 24px 정도가 무난 |
| border-radius | 모서리 둥글기 | 8px 보통, 50px 이상이면 알약 모양 |
| box-shadow | 그림자 | 흐림 8px 안팎이면 살짝 떠 보임 |
| box-shadow (흐림 0) | 입체 버튼 | 아래로 4px, 흐림 0 이면 두께처럼 보임 |
| transition | 값이 바뀔 때 걸리는 시간 | 0.2s. 없으면 툭 바뀜 |
| transform: scale | 호버 때 크기 | 1.05 정도. 넘으면 흔들려 보임 |
그라디언트를 쓰면 호버 색을 background-color 로 못 바꿉니다
그라디언트는 background 라는 단축 속성에 들어갑니다. 그런데 background-color 는 그 안의 한 부분일 뿐입니다. 그라디언트가 걸린 상태에서 호버에 background-color 를 지정하면 그라디언트가 그대로 위에 남아 있어서 아무 일도 일어나지 않습니다.
그래서 이 도구는 그라디언트일 때 호버 규칙에서 background-color 를 아예 빼고, 크기와 글자색만 바꿉니다. 그라디언트 색 자체를 호버에서 바꾸고 싶다면 background 를 통째로 다시 써야 합니다.
키보드로 오는 사람도 버튼이 보여야 합니다
마우스가 아니라 탭 키로 페이지를 넘기는 사람에게는 호버 효과가 아무 소용이 없습니다. 지금 어디에 있는지 알려면 초점 표시가 필요합니다. 브라우저가 기본으로 그려 주지만, 버튼을 꾸미는 코드가 outline: none 으로 지우는 일이 흔합니다.
이 도구는 :focus-visible 규칙을 함께 내보냅니다. 이 선택자는 키보드로 이동해 왔을 때만 걸리고 마우스 클릭에는 걸리지 않아서, 클릭할 때마다 테두리가 생기는 일 없이 키보드 사용자만 표시를 받습니다.
테두리 색은 버튼의 배경색을 씁니다. 배경이 투명한 아웃라인 버튼이면 테두리색을, 그것도 없으면 글자색을 씁니다. 투명한 초점 테두리는 없는 것과 같기 때문입니다.
복사한 뒤에 확인할 것
- •class 이름이 .button 입니다. 프로젝트에 이미 같은 이름이 있으면 바꾸세요.
- •<a> 태그로 만들 때를 위해 text-decoration: none 을 넣어 뒀습니다. <button> 이면 없어도 됩니다.
- •<button> 태그에는 브라우저 기본 테두리와 배경이 있습니다. 코드에 border 와 background 가 모두 들어 있어 덮이지만, 폰트는 상속되지 않으니 font-family: inherit 이 필요할 수 있습니다.
- •글자색과 배경색의 대비가 충분한지 확인하세요. 옅은 배경에 흰 글자는 읽기 어렵습니다.
- •비활성 상태(:disabled)는 이 도구가 만들지 않습니다. 필요하면 직접 추가하세요.
자주 묻는 질문
미리보기와 복사한 코드가 다르게 보입니다.
둘은 같은 선언 목록에서 나오므로 값은 같습니다. 다르게 보인다면 적용한 곳의 다른 CSS가 덮어쓰고 있을 가능성이 큽니다. 브라우저 개발자 도구에서 어떤 규칙이 이겼는지 확인해 보세요.
그림자가 코드에 안 보입니다.
아래로 이동·흐림이 모두 0이면 그릴 것이 없어서 box-shadow 줄을 넣지 않습니다. 슬라이더를 올리면 나타납니다.
테일윈드를 쓰는데 이 코드를 어떻게 쓰나요?
값을 참고해 유틸리티 클래스로 옮기거나, @apply 없이 이 CSS를 그대로 전역 스타일시트에 넣어도 됩니다. 클래스 이름만 겹치지 않게 하세요.
만든 버튼이 저장되나요?
아니요. 전부 브라우저 안에서 만들어집니다. 새로고침하면 초기 상태로 돌아갑니다.