CSS 버튼만들기

css로 버튼 만들기


그동안 포스팅했던 내용들로 버튼을 만들어보겠습니다.
​
주요 css
display
background-image:linear-gradient
border-radius

<style type="text/css"> a {display:block; width:200px; height:50px; font:bold 14px/23px "나눔고딕", "돋움", "굴림"; text-align:center; line-height:50px; text-decoration:none;} a:link, a:visited {  background-color: #f33f2a;  background-image: -webkit-gradient(linear, left top, left bottom, from(#f33f2a),to(#dc331f));  background-image: -webkit-linear-gradient(top, #f33f2a, #dc331f);  background-image: -moz-linear-gradient(top, #f33f2a, #dc331f);  background-image: -o-linear-gradient(top, #f33f2a, #dc331f);  background-image: -ms-linear-gradient(top, #f33f2a, #dc331f);  background-image: linear-gradient(top, #f33f2a, #dc331f);  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f33f2a', EndColorStr='#dc331f');  border-style:solid;  border-width:1px;  border-color:#f66250 #aa170e #aa170e #f66250;  border-radius:7px;  -moz-border-radius: 7px;   -webkit-border-radius: 7px;  -khtml-border-radius: 7px;  -o-border-radius: 7px;  -ms-border-radius: 7px;  color:#fff;  } a:hover, a:active {  background-color: #aa1e0d;  background-image: -webkit-gradient(linear, left top, left bottom, from(#dc331f),to(#f33f2a));  background-image: -webkit-linear-gradient(top, #dc331f, #f33f2a);  background-image: -moz-linear-gradient(top, #dc331f, #f33f2a);  background-image: -o-linear-gradient(top, #dc331f, #f33f2a);  background-image: -ms-linear-gradient(top, #dc331f, #f33f2a);  background-image: linear-gradient(top, #dc331f, #f33f2a);  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#dc331f', EndColorStr='#f33f2a');  border-style:solid;  border-width:1px;  border-color:#7b0c05 #ef5d4c #ef5d4c #7b0c05;  border-radius:7px;  -moz-border-radius: 7px;   -webkit-border-radius: 7px;  -khtml-border-radius: 7px;  -o-border-radius: 7px;  -ms-border-radius: 7px;  color:#f5d8d8;  } </style> <a href="http://jaguarkim2108.blogspot.kr/">블로그</a>