Skip to content

Instantly share code, notes, and snippets.

@vicainelli
Created March 12, 2014 03:14
Show Gist options
  • Save vicainelli/9500116 to your computer and use it in GitHub Desktop.
Save vicainelli/9500116 to your computer and use it in GitHub Desktop.
Yahoo! Pure CSS
.pure-button {
display: inline-block;
*display: inline;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&::-moz-focus-inner {
padding: 0;
border: 0;
}
font-family: inherit;
font-size: 100%;
*font-size: 90%;
*overflow: visible;
padding: .5em 1em;
color: #444;
color: rgba(0, 0, 0, 0.8);
*color: #444;
border: 1px solid #999;
border: 0 rgba(0, 0, 0, 0);
background-color: #E6E6E6;
text-decoration: none;
border-radius: 2px;
}
.pure-button-hover {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
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.1)));
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
}
.pure-button {
&:hover {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
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.1)));
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
}
&:focus {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
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.1)));
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
outline: 0;
}
}
.pure-button-active {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
}
.pure-button {
&:active {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
}
&[disabled] {
border: 0;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
filter: alpha(opacity = 40);
-khtml-opacity: .4;
-moz-opacity: .4;
opacity: .4;
cursor: not-allowed;
box-shadow: none;
}
}
.pure-button-disabled {
border: 0;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
filter: alpha(opacity = 40);
-khtml-opacity: .4;
-moz-opacity: .4;
opacity: .4;
cursor: not-allowed;
box-shadow: none;
&:hover, &:focus, &:active {
border: 0;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
filter: alpha(opacity = 40);
-khtml-opacity: .4;
-moz-opacity: .4;
opacity: .4;
cursor: not-allowed;
box-shadow: none;
}
}
.pure-button-hidden {
display: none;
}
.pure-button::-moz-focus-inner {
padding: 0;
border: 0;
}
.pure-button-primary, .pure-button-selected {
background-color: #0078e7;
color: #fff;
}
a {
&.pure-button-primary, &.pure-button-selected {
background-color: #0078e7;
color: #fff;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment