3D Button 으로 CSS3 의 속성을 적용하여 구현했다고 합니다.

작동원리는 NUMBER ONE! 이란 버튼을 누르면 내려갔다가 놓으면 다시 올라오도록 되어 있습니다.

a tag 에 id 가 button 인 element 를 생성합니다.

#button {

width:165px;   /* a tag 의 width */

height:23px;   /* a tag 의 Height */

display:block;  /* 화면표시를 block 형식으로 보여줌. 즉 줄바꿈, left, top, right, bottom 적용됨, 이외 속성 : none, inline, inline-block */

/* 서체 속성 지정 */

font-family:Arial, "Helvetica", sans-serif; 

font-size:12px;

font-weight:bold;

color:#fff;

text-decoration:none;

text-transform:uppercase;

text-align:center;

text-shadow:1px 1px 0px #07526e;

/* padding 적용 */

padding-top:12px;

margin-left:auto;

margin-right:auto;

left:30px;

/* position 을 relative 로 지정해서 left 속성을 지정할수 있도록 함 */

position:relative;

cursor:pointer;

border-left:solid 1px #2ab7ec;

/* linear-gradient 함수는 image 객체를 반환합니다. 사용법은 방향(각도, left top right bottom), start color, end color 로 입력하면 되고 %는 색상의 진행거리를 표현합니다. 

사각형을 기준으로 해서 중앙에서 gradient line 를 그리고 각도가 0deg 이면 bottom 과 같고 방향은 bottom to top 으로 gradient이 진행됩니다.

*/

background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -o-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -moz-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -ms-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

/* border-radius 를 사용하여 모서리에 라운드 처리합니다. 5px 라면 x축 5, y 축 5 로 라운드 계산 */

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

/* box-shadow 는 x-offset, y-offset, blur, spread, 색상으로 구현됩니다. , 를 사용하여 여러개의 shadow를 표현할수 있습니다. inset 0px 1px 0px #2ab7ec 시작선을 표시해 주고, 0px 5px 0px 0px #07526e 옆면shadow 표시, 0px 10px 5px #999 그림자 표시

<shadow> = inset? && [ <length>{2,4} && <color>? ]

처음의 두 길이값은 각각 그림자의 수평과 수직 오프셋을 의미합니다. 

세번째 길이값은 블러(blur) 반경입니다.(text-shadow property에서의 블러반경과 비교해 보세요.). 

마지막으로 네번째 길이값은 스프레드(spread) 반경으로 그림자를 부모 element의 크기와 비교하여 크거나(grow) 작게(shrink) 만듭니다.

 */

-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

}

/* button 을 눌렀을때 보이게 되는 형태 */

#button:active {

top:3px;

-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

}

/* button css 앞에 수행되는 css */

#button:before {

content:"1";

width:35px;

height:25px;

display:block;

position:absolute;

padding-top:10px;

top:0px;

margin-left:-37px;

font-size:16px;

font-weight:bold;

color:#8fd1ea;

text-shadow:1px 1px 0px #07526e;

border-right:solid 1px #07526e;

background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

-webkit-border-top-left-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-moz-border-radius-topleft: 5px;

-moz-border-radius-bottomleft: 5px;

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

}

/* button active 앞에 수행되는 css */

#button:active:before {

top:-3px;

-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

}

블로그 이미지

희망잡이

,