// ## Fancy button // // Usage: // // <button>Click me</button> // // And then in your SCSS file: // // button { // @include button; // // insert any optional button helper mixins here // } @mixin button {

@include border-radius(6px);
@include box-shadow(0px 1px 3px rgba(0,0,0,0.6));
background: #222 url(/images/button.png) repeat-x; 
display: inline-block; 
padding: 5px 10px 6px; 
color: #fff; 
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border: none;
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
line-height: 1;
font-weight: bold;
font-size: 13px;

&:hover {
    background-color: #111;
    color: #fff;
}

&:active {
    top: 1px;
}

}

// Make the button smaller @mixin smallbutton {

font-size: 11px;

}

// Make the button larger @mixin largebutton {

font-size: 14px;
padding: 8px 14px 9px;

}

// Make the button even larger @mixin xlargebutton {

font-size: 24px;
padding: 8px 14px 9px;

}

// Make the button huge @mixin xxlargebutton {

font-size: 72px;
padding: 8px 14px 9px;

}

// Give the button a pink color scheme @mixin pinkbutton {

background-color: #e22092;

&:hover {
    background-color: #c81e82;
}

}

// Give the button a green color scheme @mixin greenbutton {

background-color: #91bd09;

&:hover {
    background-color: #749a02;
}

}

// Give the button a red color scheme @mixin redbutton {

background-color: #e62727;

&:hover {
    background-color: #cf2525;
}

}

// Give the button an orange color scheme @mixin orangebutton {

background-color: #ff5c00;

&:hover {
    background-color: #d45500;
}

}

// Give the button a blue color scheme @mixin bluebutton {

background-color: #2981e4;

&:hover {
    background-color: #2575cf;
}

}

// Give the button a yellow color scheme @mixin yellowbutton {

background-color: #ffb515;

&:hover {
    background-color: #fc9200;
}

}

// Give the button a grey color scheme @mixin greybutton {

background-color: #aaaaaa;

&:hover {
    background-color: #999999;
}

}

// ## iOS style checkbox/switch // // Usage: // // <label> // <input type=“checkbox”/> // <span class=“check”></span> // </label> // // And then in your SCSS file: // // label { // @include iphonecheckbox; // } @mixin iphonecheckbox($width:80px,$height:32px) {

@include border-radius(4px);
display: inline-block;
background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
border: 1px solid #555555;
width: $width;
position: relative;
height: $height;
cursor: pointer;

.check {
    @include border-radius(3px);
    @include transition(left .25s ease-out);
    display: block;
    width: $width / 2;
    height: $height - 2;
    background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
    background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
    border: 1px solid #e5e5e5;
    position: absolute;
    top: 0px;
    left: 0px;
}

input[type=checkbox] {
    display: none;

    &:checked + .check {
        @include box-shadow(#244766 -1px 0px 3px);
        top: 0px;
        left: ($width / 2 ) - 2;
    }

    & + .check {
        @include box-shadow(#244766 1px 0px 3px);
        top: 0px;
        left: 0px;
    }
}

}