
<style type="text/css"> |
.button { |
display: inline-block; |
white-space: nowrap; |
background-color: #ccc; |
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); |
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); |
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); |
-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: #ddd; |
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); |
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); |
} |
.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; |
} /* 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"; |
} |
</style> |
调用:<input name="" type="button" class="button" value="CSS3 Button" /> |



