Skip to content

Instantly share code, notes, and snippets.

@kennelliott
Last active December 11, 2015 17:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kennelliott/4636381 to your computer and use it in GitHub Desktop.
Save kennelliott/4636381 to your computer and use it in GitHub Desktop.
guardian single-instance buttons, with selected state class
/* all single-instance buttons get the .gia-button class */
.gia-button {
display: inline-block;
padding: 8px 22px;
color: #fff;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
font-weight: 200;
line-height: 1em;
cursor: pointer;
/* if text is 20px or larger */
text-shadow:-2px -2px 0px #074168, 1px 1px 1px rgba(255,255,255,.2);
/* if text is smaller than 20px */
text-shadow:-1px -1px 0px #074168;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
border:1px solid #074168;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2068a4), color-stop(1, #125185) );
background:-moz-linear-gradient( center top, #2068a4 5%, #125185 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2068a4', endColorstr='#125185');
background-color:#2068a4;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gia-button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #196191), color-stop(1, #125185) );
background:-moz-linear-gradient( center top, #196191 5%, #125185 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#196191', endColorstr='#125185');
background-color:#196191;
}
.gia-button:active {
position:relative;
top:1px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0a3f6b), color-stop(1, #125185) );
background:-moz-linear-gradient( center top, #0a3f6b 5%, #125185 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a3f6b', endColorstr='#125185');
background-color:#0a3f6b;
}
/* selected state, if necessary*/
.gia-button-selected,
.gia-button-selected:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0a3f6b), color-stop(1, #125185) );
background:-moz-linear-gradient( center top, #0a3f6b 5%, #125185 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a3f6b', endColorstr='#125185');
background-color:#0a3f6b;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment