分类
WEB++技术

css3 button

    <!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">&#36;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>&#36;39.99</span></a></li>
                <li><a href="#" title="Javascript高级编程">Javascript高级编程<span>&#36;56.00</span></a></li>
                <li><a href="#" title="Javascript权威指南">Javascript权威指南<span>&#36;39.80</span></a></li>
        </ol>
</div>
<div class="grad">123</div>
</body>
<script type="text/javascript">
</script>
</html>

unicac

...long long ago,he have a dream.

发表评论

邮箱地址不会被公开。 必填项已用*标注