Skip to content

Instantly share code, notes, and snippets.

@procload

procload/sexy-button.scss

Created August 24, 2011 14:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save procload/1168229 to your computer and use it in GitHub Desktop.
Save procload/1168229 to your computer and use it in GitHub Desktop.
Download ZIP
Compass/SASS Sexy Button Mixin
Raw
sexy-button.scss
/* Create a custom mixing for a sexy button */
@mixin sexy-button($color, $font-color) {
color: $font-color;
font-family: $secondary-font-family;
font-weight: bold;
font-size: 12px;
padding: .75em 1em;
text-decoration: none;
position: relative;
border: 1px solid rgba(0,0,0,.1);
border-top: none;
@include single-text-shadow;
@include border-radius(20px);
@include background-image($color);
@include box-shadow(rgba(0,0,0,.3) 0 2px 3px, inset rgba(255,255,255,.2) 0 2px 0);
&:active {
top: 1px;
@include box-shadow(inset rgba(255,255,255,.2) 0 2px 0);
}
}
/* Add sexy button styles to my anchor link */
a.buttonStyle {
@include sexy-button(linear-gradient(#0069a1, #003868), #FFF);
}
@tcmacdonald
Copy link

That is one, smoking hot button, guy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment