Hover, Active, Focus, Disabled 상태에 따른 CSS 버튼 디자인

보통 CSS 프레임워크들을 사용할 경우 버튼에 대한 상태를 다양하게 준비하고 있어서 별도로 만들 필요가 없는 경우가 많습니다.

하지만, 직접 버튼을 만듦으로써, 각 상태에 따라 어떤 애니메이션이나  기능적인 부분들을 재현할 수 있는지 볼 수 있다는 점이 학습에 도움이 되기때문에, 한 번쯤 만들어보는 것이 좋다고 생각합니다. 

 

최근엔 모바일에서 사용이 많아진 관계로 버튼은 기본적으로 화면상에서 최소한 7mm x 7mm - 이건 조사하는 곳마다 다른데 10mm x 10mm을 기준 잡는 곳도 있고 천차만별 - 크기를 차지해야한다고 하는데, 이 크기를 px로 변환하면 대략 44px 정도의 크기를 권장합니다. 버튼 높이가 대략적으로 44px 이상이면 터치하는데 큰 무리가 없다는 이야기죠. 

 

버튼을 디자인 할때 단순하게 width, height 단위로 크기를 잡으려고하면 안에 내용이 길어지거나 아이콘이 들어가거나 할때 새롭게 계산해야하는 번거로움이 존재하기때문에 보통 padding을 상하좌우 값을 줌으로써 크기를 만듭니다.

 

일반적으로 웹브라우저가 16px의 크기를 폰트 기본 값으로 갖고 있기 때문에 상하 패딩 값이 각각 14px씩 들어가면 총 44px의 높이를 갖게 됩니다. 보통 좌우 패딩 : 상하 패딩의 비율을 2:1로 하는 사례들이 많이 보이는 관계로, 이 기준대로 여백의 사이즈를 계산해보면 padding: 14px 28px; 이라는 값을 도출됩니다.. 

 

개인적으로 선호하는 8px 그리드 디자인을 기준으로 했을때 조금은 어색한 숫자입니다. 심플하게 가자면 padding: 16px 32px; 즉 padding : 1rem 2rem; 으로 표현하는 것이 편하긴 하죠.

 

저는 약간의 변형을 주기 위해서 padding: 12px 24px의 간격을 만들어 높이가 40px인 버튼을 만들었습니다. 44px에는 조금 미달되지만, 40px정도면 터치에 무리없는 크기라고 판단했습니다. 

 

See the Pen Buttons by 리또리또 (@illustudio) on CodePen.