Skip to content

Instantly share code, notes, and snippets.

@nladart
Created March 19, 2013 02:24
Show Gist options
  • Save nladart/5193241 to your computer and use it in GitHub Desktop.
Save nladart/5193241 to your computer and use it in GitHub Desktop.
A CodePen by awesomephant. Sass flat-design-button mixin - Playing w/ falt design and fancy Sass functions. --- Entypo pictograms by Daniel Bruce — (www.entypo.com)
<a href='#' class='danger'>Delete that thing.</a>
<a href='#' class='power'>Turn on the energy.</a>
<a href='#' class='signup'>Sign Up</a>
<a href='#' class='save'>Save</a>
<a href='#' class='fb'>Like us on Facebook</a>
<a href='#' class='twitter'>Follow us on Twitter</a>
@import "compass";
@import url(http://weloveiconfonts.com/api/?family=entypo);
$icons: ('save' '\1F4BE'),
('delete' '\12as'),
('fb' '\F30E'),
('twitter' '\F309'),
('bolt' '\26A1'),
('danger' '\26A0'),
('tick' '\2713');
;
$red: rgb(235, 80, 66);
$blue: rgb(90, 120, 255);
$yellow: rgb(255, 255, 95);
$green: rgb(180, 255, 92);
$fb-blue: #3B5998;
$twitter-blue: #4099FF;
@mixin button($bg, $icon:none, $iconPosition: right){
display: inline-block;
background: $bg;
@include transition(.3s);
$color: black;
font:{
family: sans-serif;
weight: 800;
size: .8em;
}
text:{
transform: uppercase;
decoration: none;
}
padding: 1.2em 2.3em;
border-radius: .7em;
position: relative;
&:before, &:after{
display: inline-block;
font-family: entypo;
position: absolute;
}
@each $thing in $icons{
@if nth($thing, 1) == $icon {
@if $iconPosition == right {
padding-right: 3.5em;
&:after {
content: nth($thing, 2);
right: 1.5em;
}
}
@if $iconPosition == left {
padding-left: 3.5em;
&:before {
content: nth($thing, 2);
left: 1.5em;
}
}
}
}
@if lightness($bg) > 68% {
$color: desaturate(darken($bg, 35), 70);
&:hover, &:focus {
background: darken($bg, 5);
color: darken($color, 5);
}
}
@else {
$color: lighten($bg, 35);
&:hover, &:focus {
background: darken($bg, 5);
color: lighten($color, 5);
}
}
color: $color;
&:active {
@include transform(scale(.92));
}
&:hover, &:focus {
border-radius: .5em;
box-shadow: 0 0 0 5px lighten($bg, 20);
}
}
.danger { @include button($red, 'danger') ;}
.signup { @include button($blue, 'tick', left) ;}
.save { @include button($green,'save', right);}
.fb { @include button($fb-blue, 'fb', left); }
.twitter { @include button($twitter-blue, 'twitter', left); }
.power { @include button($yellow, 'bolt', right); }
body {
padding: 3em;
background: rgb(240,240,250);
}
a{
margin: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment