Skip to content

Instantly share code, notes, and snippets.

@cherihung
Created May 29, 2013 18:51
Show Gist options
  • Save cherihung/5672765 to your computer and use it in GitHub Desktop.
Save cherihung/5672765 to your computer and use it in GitHub Desktop.
another css3 button version. separated out top-bottom and left-right padding values. a width is actually defined in the mixin. and button is centered relative to its parent element.
@mixin mybutton ($bgdcolor, $fontcolor: #ffffff, $font-size: 12px, $corner: 5px, $padding-tb: 5px , $padding-lr: 10px, $width: 100px) {
display: inline-block;
*display: inline;
color: $fontcolor;
font-size: $font-size;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
background-color: $bgdcolor;
background-image: url('http://d.cyhung.net/images/btn-overlay.png');
background-image: -moz-linear-gradient(top, lighten($bgdcolor, 10%), $bgdcolor);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(lighten($bgdcolor, 10%)), to($bgdcolor));
background-image: -webkit-linear-gradient(top, lighten($bgdcolor, 10%), $bgdcolor);
background-image: -o-linear-gradient(top, lighten($bgdcolor, 10%), $bgdcolor);
background-image: linear-gradient(to bottom, lighten($bgdcolor, 10%), $bgdcolor);
background-repeat: repeat-x;
border-radius: $corner;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-webkit-transition: background 0.1s linear;
-moz-transition: background 0.1s linear;
transition: background 0.1s linear;
padding: $padding-tb $padding-lr;
width: $width;
position: relative;
left: 50%;
margin-left: -($width + $padding-lr)/2;
}
@mixin mybuttonHover ($bgdcolor:#e6e6e6, $fontcolor:#333333) {
background-color: $bgdcolor;
color: $fontcolor;
text-decoration:none;
background-position: 0 -99px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment