Skip to content

Instantly share code, notes, and snippets.

@derek
Forked from anonymous/dabblet.css
Created December 16, 2011 00:26
Show Gist options
  • Save derek/1483722 to your computer and use it in GitHub Desktop.
Save derek/1483722 to your computer and use it in GitHub Desktop.
Untitled
.yui3-button {
/* Structure */
display: inline-block;
*display: inline;
zoom: 1;
font-size: 100%;
margin: 0;
padding: 0 1em;
line-height: normal;
line-height: 2.0;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
/* Presentation */
color: rgba(0,0,0, 0.80);
*color: #444;
background-color: #e6e6e6;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255, 0.30)), color-stop(40%, rgba(255,255,255, 0.15)), to(transparent));
background-image: -webkit-linear-gradient(rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
background-image: -moz-linear-gradient(top, rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
background-image: -ms-linear-gradient(rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
background-image: -o-linear-gradient(rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
background-image: linear-gradient(rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=0);
text-decoration: none;
border: none;
*border: solid 1px #999;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 0 rgba(255,255,255, 0.30) inset, 0 1px 2px rgba(0,0,0, 0.15);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 0 rgba(255,255,255, 0.30) inset, 0 1px 2px rgba(0,0,0, 0.15);
box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 0 rgba(255,255,255, 0.30) inset, 0 1px 2px rgba(0,0,0, 0.15);
/* Transitions */
-webkit-transition: 0.1s linear -webkit-box-shadow;
-moz-transition: 0.1s linear -moz-box-shadow;
-ms-transition: 0.1s linear box-shadow;
-o-transition: 0.1s linear box-shadow;
transition: 0.1s linear box-shadow;
}
.yui3-button:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.15)));
background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
background-image: -moz-linear-gradient(top, transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#26000000', GradientType=0);
}
.yui3-button:active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0, 0.10)), to(rgba(0,0,0, 0.15)));
background-image: -webkit-linear-gradient(rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
background-image: -ms-linear-gradient(rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
background-image: -o-linear-gradient(rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
background-image: linear-gradient(rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1A000000', endColorstr='#26000000', GradientType=0);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
-moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
}
.yui3-button-disabled,
.yui3-button-disabled:hover,
.yui3-button-disabled:active {
cursor: default;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=55);
-khtml-opacity: 0.55;
-moz-opacity: 0.55;
opacity: 0.55;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset;
-moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset;
box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset;
}
.yui3-button::-moz-focus-inner{
padding: 0;
border: 0;
}
<br ><br ><br >
<h1>Why are input elements shorter than button elements in Firefox?</h1>
<button class='yui3-button'>button</button>
<input type='button' class='yui3-button' value='input'>
<button>Unstyled button</button>
{"page":"html","view":"split-vertical"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment