<원본 : http://cssgradientbutton.com/ >


<!DOCTYPE html><html><head>

<style type="text/css">


.button_example{

border:1px solid #7d99ca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;

 background-color: #a5b8da; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));

 background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);

 background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);

 background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);

 background-image: -o-linear-gradient(top, #a5b8da, #7089b3);

 background-image: linear-gradient(to bottom, #a5b8da, #7089b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5b8da, endColorstr=#7089b3);

}


.button_example:hover{

 border:1px solid #5d7fbc;

 background-color: #819bcb; background-image: -webkit-gradient(linear, left top, left bottom, from(#819bcb), to(#536f9d));

 background-image: -webkit-linear-gradient(top, #819bcb, #536f9d);

 background-image: -moz-linear-gradient(top, #819bcb, #536f9d);

 background-image: -ms-linear-gradient(top, #819bcb, #536f9d);

 background-image: -o-linear-gradient(top, #819bcb, #536f9d);

 background-image: linear-gradient(to bottom, #819bcb, #536f9d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#819bcb, endColorstr=#536f9d);

}

</style></head>

<body>


<a class="button_example" href="#">PREVIEW BUTTON</a>


</body>

</html>

이 게시물을