CSS 입문 | CSS3 확장 | CSS3 버튼


CSS3 버튼(button)

CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있다. CSS에서 버튼은 <button> 태그 뿐만 아니라 <a> 태그와 <input> 태그로도 만들 수 있다.

<button class="btn">button 태그</button>
<a href="#" class="btn">a 태그</a>
<input type="button" value="input 태그" class="btn">

button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정할 수 있다.

다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제이다.

<style>
    .btn {
        background-color: #87CEEB;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover {
        background-color: #4169E1;
        color: white;
    }
</style>

위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있다.

다음 예제는 그림자 효과를 설정한 버튼 예제이다.

<style>
    .btn {
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn1, .btn2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
</style>

위의 예제처럼 box-shadow 속성을 이용하면, 버튼에 실제와 같은 그림자 효과를 간단히 설정할 수 있다.

다음 예제는 버튼을 사용하지 못하도록 설정하는 예제이다.

<style>
    .btn2 { opacity: 0.4; cursor: not-allowed; disabled; }
</style>

위의 예제처럼 disabled 속성을 이용하면, 버튼을 사용하지 못하도록 만들 수 있다. 이렇게 사용이 금지된 버튼은 반투명하게 보이게 됩니다. 이때 cursor 속성의 속성값을 not-allowed로 설정하면, 사용이 금지된 버튼을 더욱 그럴싸하게 표현할 수 있다.

float 속성을 이용하여 버튼으로 메뉴를 만들 수도 있다.

<style>
    .btn {
        background-color: #87CEEB;
        border: solid 1px #00BFFF;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        float: left;
    }
</style>

다양한 형태의 버튼 예제

CSS의 애니메이션(animation) 효과를 이용하면, 버튼에 더욱 다양한 효과를 적용할 수 있다.

다음 예제는 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제이다.

<style>
    .btn span { 
        display: inline-block; 
        position: relative; 
        transition: 0.5s; 
    }
    .btn span::after { 
        content: "▶"; 
        opacity: 0; 
        transition: 0.5s;
    }
    .btn:hover span::after { 
        opacity: 1; 
        right: 0px; 
    }
</style>

위의 예제에서 ‘▶’기호는 ::after 선택자를 이용하여 ‘버튼’이라는 문자열 바로 뒤에 삽입된다.
이때 opacity 속성값을 0으로 설정하여 처음에는 보이지 않는다.
하지만 마우스를 버튼 위로 올리면, opacity 속성값이 1로 변경되어 눈에 보이게 된다.
이때 transition 효과가 실행되며 0.5초 동안 천천히 opacity 속성값이 변경된다.

다음 예제는 버튼을 누르면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제이다.

<style>
    .btn {
        background-color: orange;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .btn::after {
        content: "";
        background-color: #FFD700;
        display: block;
        opacity: 0;
        transition: all 0.8s;
    }
    .btn:active::after { 
        opacity: 1; 
        transition: 0s
    }
</style>

위의 예제는 :active 선택자와 ::after 선택자를 이용하여 transition 효과를 설정함으로써 구현하고 있다.

다음 예제는 진짜 버튼처럼 누르는 효과를 적용한 버튼 예제이다.

<style>
    .btn {
        background-color: orange;
        display: inline-block;
        border: none;
        outline: none;
        border-radius: 20px;
        box-shadow: 0 9px #B0B0B0;
    }
    .btn:active {
        background-color: #FF8C00;
        box-shadow: 0 5px #808080;
        transform: translateY(4px);
    }
</style>

위의 예제에서는 우선 box-shadow 속성을 이용하여 버튼에 그림자 효과를 설정한다.
그 후에 사용자가 버튼을 누르면 :active 선택자와 transform 효과를 이용하여 버튼의 위치를 아래로 살짝 이동시킨다.
이렇게 함으로써 버튼이 진짜로 눌리는 듯한 효과를 줄 수 있게 된다.