Skip to content

Instantly share code, notes, and snippets.

@jonesch
Created October 4, 2012 15:11
Show Gist options
  • Save jonesch/3834263 to your computer and use it in GitHub Desktop.
Save jonesch/3834263 to your computer and use it in GitHub Desktop.
Wordpress Login Button - SASS & Compass Style
//Set your two colors for the button
$main-green: #88a904;
$dark-green: #6b8a02;
//Overwrite the default Blue WP Login button
#wp-submit {
background-color: $main-green;
@include background-image(linear-gradient($main-green, $dark-green));
border: 1px solid $dark-green;
border-bottom: 1px solid darken($dark-green, 5%);
@include border-radius(4px);
@include box-shadow(inset 0 1px 0 0 lighten($dark-green, 40%));
color: #fff;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 7px 0 8px 0;
text-align: center;
text-shadow: 0 -1px 0 darken($main-green, 10%);
width: 40%;
&:hover {
background-color: darken($main-green, 2%);
@include background-image(linear-gradient(darken($main-green, 2%), darken($dark-green, 2%)));
@include box-shadow(inset 0 1px 0 0 lighten($dark-green, 20%));
cursor: pointer;
}
&:active {
border: 1px solid #5b992b;
border-bottom: 1px solid #538c27;
@include box-shadow(inset 0 0 8px 4px darken($main-green, 10%), 0 1px 0 0 #eee);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment