html5做图片按钮?!DOCTYPE htmlhtmlheadtitleJust some other awesome CSS3 buttons - demo/titl
html5做图片按钮
?
<!DOCTYPE html><html><head> <title>Just some other awesome CSS3 buttons - demo</title> <meta charset="utf-8"> <style> body { margin: 0; text-align: center; } h2 { font: bold 1.4em 'Lucida sans', 'Trebuchet MS', Tahoma, Arial; color: #555; } .button { display: inline-block; white-space: nowrap; background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));/****渐变 采用直线渐变 从左到顶，再到下****/ background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -ms-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); border: 1px solid #777; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em;/*****边框的圆角设置****/ -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);/**这个很重要 inset**/ -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button:hover { background-color: #eee; background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); background-image: -webkit-linear-gradient(top, #fafafa, #ddd); background-image: -moz-linear-gradient(top, #fafafa, #ddd); background-image: -ms-linear-gradient(top, #fafafa, #ddd); background-image: -o-linear-gradient(top, #fafafa, #ddd); background-image: linear-gradient(top, #fafafa, #ddd); } .button:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .button:focus { outline: 0; background: #fafafa; } .button:before { background: #ccc; background: rgba(0,0,0,.1); float: left; width: 1em; text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0 .2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em; -webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em; pointer-events: none; }/* Buttons and inputs */button.button, input.button { cursor: pointer;overflow: visible; /* removes extra side spacing in IE */}/* removes extra inner spacing in Firefox */button::-moz-focus-inner { border: 0; padding: 0;}/* If line-height can't be modified, then fix Firefox spacing with padding */ input::-moz-focus-inner { padding: .4em;}
/* The disabled styles */.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {background: #eee;color: #aaa;border-color: #aaa;cursor: default;text-shadow: none;position: static;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;} /* Hexadecimal entities for the icons */ .add:before { content: "\271A"; } .edit:before { content: "\270E"; } .delete:before { content: "\2718"; } .save:before { content: "\2714"; } .email:before { content: "\2709"; } .like:before { content: "\2764"; } .next:before { content: "\279C"; } .star:before { content: "\2605"; } .spark:before { content: "\2737"; } .play:before { content: "\25B6"; }
/* Social media buttons */.tw, .fb,.tw:hover, .fb:hover{ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));}
.tw, .tw:focus{ background-color: #88E1E6;}.fb, .fb:focus{ background-color: #3C5A98; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4);}
.tw:hover{ background-color: #b1f0f3;}.fb:hover{ background-color: #879bc3; } .tw:before { content: "t"; background: #91cfd3; background: rgba(0,0,0,.1);color: #fff;font-family: verdana;text-shadow: 0 1px 0 rgba(0,0,0,.4); } .fb:before { content: "f"; background: #4467ac; background: rgba(0,0,0,.1);color: #fff;text-shadow: 0 1px 0 rgba(0,0,0,.4); }
</style></head>
<body>
<br><br>
<h2>Actions</h2><a href="" class="button">Button</a><a href="" class="button add">Add</a><a href="" class="button edit">Edit</a><a href="" class="button delete">Delete</a><a href="" class="button save">Save</a><a href="" class="button email">Send email</a>
<br><br>
<h2>Miscellaneous</h2><a href="http://www.clxgj.com?" class="button like">Like</a><a href="http://www.clxgj.com" class="button next">Next</a><a href="http://www.clxgj.com" class="button star">Favourite</a><a href="http://www.clxgj.com" class="button spark">Spark</a><a href="http://www.clxgj.com" class="button play">Play</a>
<br><br>
<h2>Social media buttons</h2>
<a href="http://www.clxgj.com?" class="button tw">Follow me</a><a href="http://?javascript:mctmp(0);www.clxgj.com" class="button fb">Become a fan</a>
<h2>Buttons and inputs</h2>
<button class="button">Clean button</button><button class="button save">Button with icon</button><button class="button" disabled>Disabled button</button><button class="button save" disabled>Another disabled button</button>
<br><input class="button" type="submit" value="Input submit"><input class="button" type="button" value="Input button"><input class="button" type="submit" value="Input submit disabled" disabled>
<input class="button" type="button" value="Input button disabled" disabled>
?
</body>
</html>
