CSS로 그럴듯한 버튼효과를 내보자

별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다.
급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다.

미리보기

코드설명

HTML

HTML은 기본 버튼을 사용하고 .btn으로 기본속성을 지정하고 .hover로 효과의 형태를 변경하겠습니다.

<button class="btn hover1"> BUTTON 1 </button>
<button class="btn hover2"> BUTTON 2 </button>
<button class="btn hover3"> BUTTON 3 </button>
<button class="btn hover4"> BUTTON 4 </button>

CSS

.btn의 설정으로 기본형태를 정의합니다.
아래쪽에 있는 transition과 color속성이 중요하다 할 수 있습니다.

    .btn {
        display:block;
        width:200px; 
        height:40px; 
        line-height:40px; 
        border:1px #3399dd solid;;
        margin:15px auto; 
        background-color:#66aaff;  
        text-align:center; 
        cursor: pointer;  

        color:#333; 
        transition:all 0.9s, color 0.3;  
    }
    .btn:hover{color:#fff;}

.hover1, .hover2, .hover3, .hover4의 CLASS명으로 효과를 구분했습니다.
효과는 box-shadow를 활용하여 효과를 주었습니다.

    .hover1:hover{
        box-shadow:200px 0 0 0 rgba(0,0,0,0.5) inset;
    }
    .hover2:hover{
        box-shadow:-200px 0 0 0 rgba(0,0,0,0.5) inset;
    }
    .hover3:hover{
        box-shadow: 0 80px 0 0  rgba(0,0,0,0.25) inset, 
                    0 -80px 0 0 rgba(0,0,0,0.25) inset;
    }
    .hover4:hover{
        box-shadow: 200px 0 0 0 rgba(0,0,0,0.25) inset, 
                   -200px 0 0 0 rgba(0,0,0,0.25) inset;
    }

box-shadow 간단설명
box-shadow : 200px 0 0 0 rgba(0,0,0,0.5) inset;
200px 0 : 앞쪽의 2개의 숫자는 윗쪽에서 200px, 왼쪽에서 0만큼 띄우라는 뜻
0 (3번째 숫자) : 번짐의 정도 임
0 (4번째 숫자) : 펼처짐의 넓이 임
rgba(0,0,0,0.5) : 색상값과 투명도 임
inset : 원그림의 외부가 아니라 내부에서만 표현하라는 뜻