<!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> |
分类
css3 button
