Instantly share code, notes, and snippets.
adamjohnson/_buttons.scss
Last active Dec 14, 2015
CSS3 Stylish buttons from Dira.ro, converted to SCSS
// --- | |
// Compass (v0.13.alpha.4) | |
// Sass (v3.2.7) | |
// --- | |
// Make making buttons easier | |
// https://css3-buttons.heroku.com/ | |
// https://github.com/dira/CSS3-stylish-buttons | |
// This file has been converted to SCSS & requires Compass | |
@mixin gradient($top, $bottom) { | |
background-color: $bottom; | |
@include background-image(linear-gradient(top, $top, $bottom)); | |
} | |
@mixin button { | |
display: inline-block; | |
padding: .5em 2em .55em; | |
outline: none; | |
cursor: pointer; | |
text-align: center; | |
text-decoration: none; | |
@include border-radius(.5em); | |
// this determines Mozilla to show the padding | |
border: solid 1px #ccc; | |
@include box-shadow(0 1px 2px rgba(0,0,0,.2)); | |
text-shadow: 0 1px 1px rgba(0,0,0,.3); | |
&:hover { | |
text-decoration: none; | |
} | |
&:active { | |
position: relative; | |
top: 1px; | |
} | |
} | |
@mixin color($background) { | |
border: solid 1px darken($background, 3%); | |
@include gradient(lighten($background, 13%), $background); | |
color: mix(#fff, $background, 90%); | |
&:hover { | |
@include gradient(lighten($background, 10%), darken($background, 5%)); | |
} | |
&:active { | |
@include gradient($background, lighten($background, 10%)); | |
color: mix(#fff, $background, 70%); | |
} | |
} | |
// Mozilla: don't show border around the button's text on click | |
// This should probably be somewhere in the partials directory, | |
// but we're gonna keep it here for modulatiry | |
button, | |
input[type="reset"], | |
input[type="button"], | |
input[type="submit"], | |
input[type="file"] > input[type="button"] { | |
&::-moz-focus-inner { | |
border: none; | |
} | |
} | |
// Use it | |
// .btn { | |
// @include button; | |
// @include color(#d22); | |
// } |
/* Don't forget to @include button and @include color(#d22) in your SCSS file */ | |
button::-moz-focus-inner, | |
input[type="reset"]::-moz-focus-inner, | |
input[type="button"]::-moz-focus-inner, | |
input[type="submit"]::-moz-focus-inner, | |
input[type="file"] > input[type="button"]::-moz-focus-inner { | |
border: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment