다양하고 동적인 CSS Button 소스

홈페이지를 제작하다 보면 버튼 하나도 포토샵 작업의 귀차니즘이 생길 때가 있습니다.

그럴 때 유용한 CSS 버튼 소스입니다.

그리고 이미지의 용량도 적게나마 줄일 수 있는 장점이 있겠죠?? 

간편하게 CSS 버튼을 온라인으로 제작 할 수 있는 사이트도 있지만.. 

아래에 소개 해드릴 사이트는 CSS 버튼을 보고 소스 다운도 가능합니다.

그리고 온라인으로 만드는 버튼보다 좀 더 완성도가 있다고 생각합니다.^^

CSS

First of all, we will give the general style of the button, including its active state. It is important to notice the relative positioning, since it will help us later with the positioning of the ::before element:

.a_demo_one {

    background-color:#ba2323;

    padding:10px;

    position:relative;

    font-family: 'Open Sans', sans-serif;

    font-size:12px;

    text-decoration:none;

    color:#fff;

    border: solid 1px #831212;

    background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);

    border-radius: 5px;

}

 

.a_demo_one:active {

    padding-bottom:9px;

    padding-left:10px;

    padding-right:10px;

    padding-top:11px;

    top:1px;

    background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);

}

링크 : http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/