Canv.as-style CSS buttons
button::-moz-focus-inner {
border: 0;
padding: 0;
}
button.basic {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #bbb;
position: relative;
background: #ddd;
background: -moz-linear-gradient(top, #ddd 0%, #efefef 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddd), color-stop(100%,#efefef)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#efefef',GradientType=0 ); /* ie */
color: #222;
cursor: pointer;
outline: none;
font-size: 18px;
font-weight: bold;
line-height: 1;
padding: 8px 13px;
box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
button.basic:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
button.basic:active {
background: #bbb;
background: -moz-linear-gradient(top, #ccc 0%, #ddd 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ddd)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccc', endColorstr='#ddd',GradientType=0 ); /* ie */
padding: 9px 12px 7px 14px;
box-shadow: none;
}
button.basic:active:before {
border-color: #ddd;
}
@-moz-document url-prefix() {
button.basic:before {
top: -8px;
left: -13px;
height: 180%;
}
button.basic:active:before {
top: -9px;
left: -14px;
}
}
Have been messing around with CSS buttons for Around and was inspired to see if I could recreate the Canv.as button styles in CSS. The Firefox hacks courtesy of @drjecker. I'd love to hear if these look "normal" in Firefox, Safari/Webkit, Chrome, Opera, and IE. Also let me know if the :active state shifts down content (it shouldn't) - used a trick with padding to give the impression of a click for the text.
Thanks!
PS: Here's a JSFiddle: jsfiddle.net/VGVeD/ and here's what the Canv.as buttons look like: cl.ly/…
Random Member