www.gusucode.com > 收集几款漂亮的CSS3按钮美化例子源码程序 > 收集几款漂亮的CSS3按钮美化例子/CSSButtonsPseudoElements/CSSButtonsPseudoElements/css/style2.css
@charset "UTF-8"; /* CSS Document */ /* DEMO 2 */ .a_demo_two { background-color:#3bb3e0; padding:10px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) ); -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785; -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785; -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785; box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .a_demo_two::before { background-color:#072239; content:""; display:block; position:absolute; width:100%; height:100%; padding-left:2px; padding-right:2px; padding-bottom:4px; left:-2px; top:5px; z-index:-1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0px 1px 0px #fff; -moz-box-shadow: 0px 1px 0px #fff; -o-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px #fff; } .a_demo_two:active { color:#156785; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background:rgb(44,160,202); -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; top:7px; } .a_demo_two:active::before { top:-2px; }