|
<style type="text/css> |
|
p { |
|
margin-bottom:10px |
|
} |
|
|
|
button { |
|
border: 1px solid #ccc; |
|
color: #333; |
|
cursor: pointer; |
|
font-size: 12px; |
|
margin: 3px; /* ensures rooms for the blur */ |
|
padding: 4px 20px; |
|
|
|
-khtml-border-radius: 25px; |
|
-moz-border-radius: 25px; |
|
-o-border-radius: 25px; |
|
-webkit-border-radius: 25px; |
|
border-radius: 25px; |
|
|
|
-khtml-text-shadow: -1px -1px 1px #ccc; |
|
-moz-text-shadow: -1px -1px 1px #ccc; |
|
-o-text-shadow: -1px -1px 1px #ccc; |
|
-webkit-text-shadow: -1px -1px 1px #ccc; |
|
text-shadow: -1px -1px 1px #ccc; |
|
} |
|
|
|
button, |
|
button.disabled:hover { |
|
-kthml-box-shadow: 0 0 2px #ccc; |
|
-moz-box-shadow: 0 0 2px #ccc; |
|
-o-box-shadow: 0 0 2px #ccc; |
|
-webkit-box-shadow: 0 0 2px #ccc; |
|
box-shadow: 0 0 2px #ccc; |
|
} |
|
|
|
button, |
|
button:active { |
|
background: #ffffff; |
|
} |
|
|
|
button, |
|
button.disabled:active { |
|
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); |
|
filter: progid:DXImageTransform.Microsoft.gradient( enabled='true', startColorstr=#ffffff, endColorstr=#e5e5e5 ); |
|
} |
|
|
|
button:hover { |
|
/* the blur doesn't look so great in Opera. Any ideas? */ |
|
-kthml-box-shadow: 0 0 2px red; |
|
-moz-box-shadow: 0 0 2px red; |
|
-o-box-shadow: 0 0 2px red; /* Opera 10.6 seems to ignore this */ |
|
-webkit-box-shadow: 0 0 2px red; |
|
box-shadow: 0 0 2px red; /* Opera 10.6 instead uses the native property but not very well */ |
|
} |
|
|
|
button.disabled { |
|
color: #ccc; |
|
cursor: default; |
|
|
|
-khtml-text-shadow: -1px -1px 1px #000; |
|
-moz-text-shadow: none; |
|
-o-text-shadow: -1px -1px 1px #000; |
|
-webkit-text-shadow: -1px -1px 1px #000; |
|
text-shadow: none; |
|
} |
|
</style> |
|
|
|
<p><button type="submit">Submit</button></p> |
|
<p><button type="submit" class="disabled">This button is disabled</button></p> |