Skip to content

Instantly share code, notes, and snippets.

@chrisvanpatten

chrisvanpatten/README.md

Created May 7, 2012 19:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chrisvanpatten/2629700 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chrisvanpatten/2629700 to your computer and use it in GitHub Desktop.
Download ZIP
Awesome CSS3 buttons with Compass and Sass
Raw
README.md

Awesome CSS3 buttons with Compass and Sass

This is a mixin I built for quick CSS3 buttons on the new VanPattenMedia.com. It's designed to be very flexible, and has a lot of options so you can customize it quickly and easily.

Documentation

Defaults are in bold, if they exist.

@include vpm-button($background-color, $text-color, $state, $spread, $radius);

  • background-color (any color) - The base background color of the button. The exact values of the colors used in the gradient (and the colors of the hover and active states) are automatically calculated using Sass' built-in darken and lighten functions.
  • text-color (any color) - The color of the button text. The CSS3 text-shadow is calculated from this value using Sass' invert function.
  • state (default, active, hover) - The state of the button.
  • spread (14%, any percentage) - The percentage between the start and end values in the CSS3 gradients.
  • radius (8px, any px value) - The radius of the button border.

Browser Support

The vpm-button mixin is fully compatible with recent versions of Webkit, Gecko, Presto, and IE9+. It will degrade gracefully in IE6-8 (no border-radius support) and in older versions of the other rendering engines.

Raw
_vpm-button.scss
@mixin vpm-button($background-color, $text-color, $state: default, $spread: 14%, $radius: 8px) {
// Enable SVG support for IE9
$experimental-support-for-svg: true;
@if $state == default {
border: 1px solid darken($background-color, 25%);
@include border-radius($radius);
text: {
decoration: none;
align: center;
}
@include text-shadow(0 1px 1px invert($text-color));
}
// Gradients and backgrounds
@if $state == default {
background-color: darken($background-color, $spread / 2); // Old browsers
@include filter-gradient(
darken($background-color, 0%),
darken($background-color, $spread),
vertical
); // IE6-9
@include background-image(
linear-gradient(
top,
darken($background-color, 0%) 0%,
darken($background-color, $spread) 100%
)
);
} @else if $state == hover {
background-color: lighten($background-color, 0%); // Old browsers
@include filter-gradient(
lighten($background-color, $spread / 2),
darken($background-color, $spread / 2),
vertical
); // IE6-9
@include background-image(
linear-gradient(
top,
lighten($background-color, $spread / 2) 0%,
darken($background-color, $spread / 2) 100%
)
);
} @else if $state == active {
background-color: darken($background-color, $spread / 2); // Old browsers
@include filter-gradient(
darken($background-color, $spread),
darken($background-color, 0%),
vertical
); // IE6-8
@include background-image(
linear-gradient(
top,
darken($background-color, $spread) 0%,
darken($background-color, 0%) 100%
)
);
}
// Box Shadow
@if $state == default {
@include box-shadow(
inset 0 1px 0 0 lighten($background-color, 25%),
inset 0 -1px 0 0 darken($background-color, 20%)
);
} @else if $state == active {
@include box-shadow(
inset 0 -1px 0 0 lighten($background-color, 25%),
inset 0 1px 0 0 darken($background-color, 20%)
);
}
// Text style
color: $text-color;
// Don't use the filter in IE9
filter: none;
}
Raw
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Awesome CSS3 buttons with Compass and Sass</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This is an awesome button. <a href="http://www.vanpattenmedia.com/" rel="nofollow" class="my-button">Go now!</a></p>
</body>
</html>
Raw
style.scss
/*
* Awesome CSS3 buttons with Compass and Sass
* Assembled by Chris Van Patten
*
* My code is public domain. Do with it what you want.
* Sass and Compass are available under their respective licenses.
* Find them at sass-lang.com and compass-style.org.
*/
@import "compass/css3";
@import "_vpm-button";
.my-button {
display: block;
padding: 14px 4px;
font: 600 24px 'Helvetica', 'Arial', sans-serif;
$text-color: #FFF;
$background-color: #8596fa;
@include vpm-button($background-color, $text-color, default);
&:hover {
@include vpm-button($background-color, $text-color, hover);
}
&:active {
@include vpm-button($background-color, $text-color, active);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment