分享个漂亮的按钮样式
作者:dadait 发布时间:February 21, 2012 分类:学习
分享个漂亮的按钮样式给大家,因为用了CSS3样式而且没做其他浏览器的兼容,喜欢的同学可以拿去稍加改动即可兼容Firefox。IE系列就不考虑了。效果看下图。

代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>漂亮的按钮</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0;padding:10px; } .link { box-shadow: #E6E6E6 1px 1px 2px,#E6E6E6 -1px -1px 2px; background: -webkit-gradient(linear, 0 0, 0 100%, from(#FEFEFE), to(#EFEFEF)); border: 1px solid #AAA; border-bottom-left-radius: 2px 2px; border-bottom-right-radius: 2px 2px; border-top-left-radius: 2px 2px; border-top-right-radius: 2px 2px; color: black; cursor: pointer; display: inline-block; font-size: 12px; margin: 10px 8px 10px 0px; padding: 1px 15px; line-height:24px; text-decoration:none; } .link:hover{ border:solid 1px #3499ff; box-shadow: #c9e4ff 1px 1px 2px,#c9e4ff -1px -1px 2px; background:-webkit-gradient(linear, left top, left bottom, from(#fefeff), to(#fcfeff), color-stop(0.5, #f0f7ff), color-stop(0.5, #d6eaff)); } .link:active{ border-color:#bcbcbc; background:-webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#eeeeee)); box-shadow: #fff 0px 0px 0px; } </style> </head> <body> <a href="javascript:void(0);" class="link" id="refresh_btn">我是个漂亮的按钮</a> </body> </html>