Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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