Skip to content

Instantly share code, notes, and snippets.

@ericf
Created March 9, 2011 05:53
Show Gist options
  • Select an option

  • Save ericf/861758 to your computer and use it in GitHub Desktop.

Select an option

Save ericf/861758 to your computer and use it in GitHub Desktop.
/* TTW.Button CSS */
.ttw-button-small,
.ttw-button-large,
.ttw-button-custom {
position: relative;
display: inline-block;
/* display: inline; for IE7 in JS */
zoom: 1;
outline: none;
border: none;
margin: 0;
width: auto;
white-space: nowrap;
font-size: 100%;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255, 0.50);
text-decoration: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
.ttw-button-small::-moz-focus-inner,
.ttw-button-large::-moz-focus-inner,
.ttw-button-custom::-moz-focus-inner {
border: none;
}
.ttw-button-small {
width: 27px;
height: 20px;
padding: 0 3px 0 25px;
background: transparent url(../img/button/small.png) 0 0 no-repeat;
font: 11px/20px "Lucida Grande", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #4A8A46;
}
.ttw-button-small:hover,
.ttw-button-small:focus {
color: #376835;
background-position: 0 -30px;
}
.ttw-button-small:active {
color: #4A8A46;
background-position: 0 -60px;
}
.ttw-button-large {
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.15), 0 1px rgba(255,255,255, 0.40) inset;
-moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.15), 0 1px rgba(255,255,255, 0.40) inset;
box-shadow: 0 1px 1px rgba(0,0,0, 0.15), 0 1px rgba(255,255,255, 0.40) inset;
border: rgb(74, 138, 71) 1px solid;
border-color: rgb(128, 128, 128);
border-color: rgba(0,0,0, 0.50);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0 15px 0 40px;
height: 33px;
background-color: rgb(153, 191, 136);
background-image: url(../img/button/large-light.png);
background-position: -25px center;
background-repeat: no-repeat;
font: 16px/33px "Lucida Grande", Helvetica, Arial, sans-serif;
font-weight: bold;
color: rgba(0,0,0, 0.80);
*color: #444;
}
.ttw-button-large:hover,
.ttw-button-large:focus {
-webkit-box-shadow: 0 1px 5px rgba(0,0,0, 0.25), 0 1px rgba(255,255,255, 0.30) inset;
-moz-box-shadow: 0 1px 5px rgba(0,0,0, 0.25), 0 1px rgba(255,255,255, 0.30) inset;
box-shadow: 0 1px 5px rgba(0,0,0, 0.25), 0 1px rgba(255,255,255, 0.30) inset;
background-image: url(../img/button/large-dark.png);
}
.ttw-button-large:active {
-webkit-box-shadow: 0 1px rgba(0,0,0, 0.05) inset, 0 -1px rgba(255,255,255, 0.20) inset;
-moz-box-shadow: 0 1px rgba(0,0,0, 0.05) inset, 0 -1px rgba(255,255,255, 0.20) inset;
box-shadow: 0 1px rgba(0,0,0, 0.05) inset, 0 -1px rgba(255,255,255, 0.20) inset;
background-image: url(../img/button/large-flat.png);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment