이미지를 쓰지않고 CSS만으로 버튼을 만드는 것은 제작에 드는 노력을 줄이는 것 뿐만 아니라 디자인의 활용도도 높아 여러모로 유용하다. CSS3 를 지원하는 최신버전의 브라우저나 모바일 브라우저를 사용하는 환경이라면 CSS만으로 버튼을 만드는 것이 좋다.

버튼을 만들 때 쓰는 요소로는 <a>, <span>, <button>, <input type="button"> 등 여러가지가 있다. 검색을 해보면 외국에선 주로 <span>과 <input>을 함께 사용하는 것 같은데, 나는 주로 <a> 와 < input>을 .btn 클래스로 묶어 함께 사용한다.

되도록 <a>로 통일하려고하지만, <form> 안에서는 어쩔 수 없이 <input> 을 사용하는 경우가 많고, 그럴 때에 <a> 와 <input> 으로 각각 제작된 버튼들의 디자인을 동일하게 맞춰주는 게 늘 귀찮다. Bootstrap이나 InuitCSS를 사용하면 편안하게 사용할 수 있지만 직접 코딩하게되는 경우에 디자인의 통일을 위해서 필수적으로 입력해 주어야하는 속성들이 있다.

아래에 내가 자주 쓰는 코드를 간단한 설명들과 함께 공유한다.

HTML

<a class='btn btn--blue'>Submit</a>
<input type='submit' class='btn btn--blue' value='Submit' />

CSS

/* CSS초기화를 위한 reset CSS 정도는 추가해주고 시작! */
@import "reset.css";

.btn {
    /* 필수적으로 입력해 주어야 하는 속성 */
    vertical-align: middle; /* Input 과 타 요소들의 텍스트 높이를 동일하게 세로 정렬한다 */
    display: inline-block; /* a나 span 태그의 경우 inline-block 요소처리 */
    line-height: 1;
    cursor: pointer; /* input type에 따라 커서의 모양이 다르다. */
    
    /* 패딩은 Input과 다른 태그들이 달라야 한다 */
    padding: 8px 12px;

    /* 디자인 요소들 */
    transition: all 0.3s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);
    border-radius: 6px;
    font-size: 10px;
    text-transform: uppercase;

    /* 요소마다 border 의 색상을 다르게 주기 위해서 속성들을 따로 기입한다 */
    border-style: solid;
    border-width: 1px;
}
input.btn {
    /* Input은 다른 태그들과 패딩값이 다르게 입력된다. top + 1, bottom -1 을 해준다. */
    padding: 9px 12px 7px;
}
.btn--blue {
    border-color: darkblue;
    background: blue;
    color: white;
}
.btn--blue:hover {
    background: darkblue;
}