Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A button mixin that takes a variable for color and an optional icon

Button Mixin

Usage:

@include button( $color [, $icon] )

Example:

@include button( #26a9e0 )

will produce:

Example

Example:

@include button( #26a9e0, menu )

will produce:

Example

You'll need to make sure your icon is named in the proper format as shown on line 4. In this case, the file would be named "icon-menu.svg" and in the "img" directory (from the parent directory).

@mixin button( $baseColor, $iconFile: null )
@if $iconFile
$iconFile: url(../img/icon-#{$iconFile}.svg)
background-position: 16px 50%, 0 0
padding-left: 36px
@else
padding-left: 15px
+background-image( $iconFile, linear-gradient( $baseColor, darken( $baseColor, 7% ) ) )
background-repeat: no-repeat
border: 1px solid darken( $baseColor, 12% )
+box-shadow( 0 1px 0 rgba(255, 255, 255, .2) )
+border-radius( 3px )
font-family: $sansSerif
padding-top: 7px
padding-bottom: 7px
padding-right: 15px
text-shadow: none
&:active
+background-image( $iconFile, linear-gradient( darken( $baseColor, 7% ), $baseColor ) )
+box-shadow( 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 rgba(0, 0, 0, .15) inset )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment