Simple CSS3 Buttons

  • Posted on May 01, 2011

I was recently inspired by these simple CSS3 buttons created by Chad Mazzola.

Lately I've been digging into SASS and found myself really getting into the color manipulation aspects of it. The coloring in the Cupid Green style in particular was just beautifully implemented, so I converted the hexidecimal values to HSL using Brandon Mathis' sweet HSL Color Picker utility.

I put together a little SASS calculation to create a variety of colors using the same basic styles. I also included the so it looks somewhat ok in IE7+.

So after speaking to Chad, he kindly pointed out a much better way of doing this using a "Simple Color" mixin he wrote specifically for this purpose.

By simply including his mixin, I was able to generate the entire button in two lines of SCSS.
// import the mixin
@import "color";
// specify HSL values {
  @include simple-color(215, 36%, 52%);

If you're not familiar with "mixins", they are much like PHP functions that accept various parameters. The only three parameters you need with this particular mixin are HSL: Hue,Saturation(%),Lightness(%). This is powerful stuff!

You can view and download the finished result of the CSS3 Buttons here. Enjoy!

comments powered by Disqus