<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>css3_button</title> <style type="text/css"> body{margin:0;padding:0;background-color:#fff;} .css3_btn{position:relative;margin:50px;display:inline-block;padding:0 15px;height:40px;font:700 20px/40px LeagueGothicRegular,"Helvetica Neue",Helvetica,Arial,Sans-serif;border:1px solid #81a445;text-align:center;text-decoration:none;color:#fff;text-shadow: rgba(0,0,0,.2) 0 1px 1px,rgba(255,255,255,.5) 0 -1px 0; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; background:#cae286; background: -webkit-linear-gradient(top, #cae286, #9eca56); background: -moz-linear-gradient(top, #cae286, #9eca56); background: -o-linear-gradient(top, #cae286, #9eca56); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(0, 0, 0, .1);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(0, 0, 0, .1);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(0, 0, 0, .1); } .css3_btn:before{position:absolute;z-index:-1;top:-6px;left:-6px;right:-6px;bottom:-6px;content:"";border:6px solid #e8e8e8; -webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;} .price{position:relative;display:inline-block;margin-left:10px;padding-left:10px;color:#678338;border-left:1px solid rgba(0, 0, 0, .15); text-shadow:rgba(255,255,255,.5) 0 1px 1px;} .price:before{position:absolute;content:"";left:0;top:0;bottom:0;border-right:1px solid rgba(227,240,192,.4);} .css3_btn:hover{ -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 rgba(0, 0, 0, .1);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 rgba(0, 0, 0, .1);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 rgba(0, 0, 0, .1); background:#b3d56c; background: -webkit-linear-gradient(top, #b3d56c, #b9d972); background: -moz-linear-gradient(top, #b3d56c, #b9d972); background: -o-linear-gradient(top, #b3d56c, #b9d972); } </style> </head> <body> <a href="#" title="" class="css3_btn"> Add to Cart<span class="price">$9.99</span> </a> </body> </html> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3</title> <style type="text/css"> <!-- *{margin:0;padding:0;} h1{ margin:30px 0 0 30px; } a{ margin:30px 0 0 30px; display:inline-block; padding:0 15px; height:40px; font:700 20px/40px Arial, Helvetica, sans-serif; border:1px solid #81a445; text-align:center; text-decoration:none; color:#fff; text-shadow:rgba(0,0,0,.2) 0 2px 2px, rgba(255,255,255,.5) 0 -1px 0; -webkit-border-radius:10px 0 020px; -moz-border-radius:20px; border-radius:20px; background-color:#cae286; background: -webkit-linear-gradient(top, #cae286, #9eca56); background:-moz-linear-gradient(top, #cae286, #9eca56); background:-o-linear-gradient(top, #cae286, #9eca56); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.1); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.1); position:relative; } a:before{ position:absolute; top:-6px; left:-6px; right:-6px; bottom:-6px; z-index:-1; content:""; border:6px solid #e8e8e8; -webkit-border-radius:23px; -moz-border-radius:23px; border-radius:23px; } a span{ position:relative; display:inline-block; margin-left:10px; padding-left:10px; color:#678338; border-left:1px solid rgba(0,0,0, .15); text-shadow:rgba(255,255,255,.5) 0 1px 1px; } a span:before{ position:absolute; content:""; top:0; bottom:0; left:0; border-right:1px solid rgba(227,240,192, .5); } a:hover{ -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .2), 0 1px 0 rgba(0,0,0, .1); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .2), 0 1px 0 rgba(0,0,0, .1); box-shadow:inset 0 1px 0 rgba(255,255,255, .2), 0 1px 0 rgba(0,0,0, .1); background-color:#b3d56c; background:-webkit-linear-gradient(top, #b3d56c, #b9d972); background:-moz-linear-gradient(top, #b3d56c, #b9d972); background:-o-linear-gradient(top, #b3d56c, #b9d972); } .grad { margin:30px; padding:20px; background-color: #F07575; /* fallback color if gradients are not supported */ background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55)); background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); background-image: linear-gradient(top, hsl(0, 80%, 70%), #BADA55); /* standard, but currently unimplemented */ } --> </style> </head> <body> <div> <h1>CSS3</h1> <ol id="list"> <li><a href="#" title="DOM编程艺术">DOM编程艺术<span>$39.99</span></a></li> <li><a href="#" title="Javascript高级编程">Javascript高级编程<span>$56.00</span></a></li> <li><a href="#" title="Javascript权威指南">Javascript权威指南<span>$39.80</span></a></li> </ol> </div> <div class="grad">123</div> </body> <script type="text/javascript"> </script> </html> |
分类