CSS for fancy buttons

0-all-together.css

.final {
   /* Basic Styles for the look */
   color: white;
   padding: 8px;
   cursor: pointer;
   font-size: 100%;
   font-family: Arial;

   /* Old browser background-color */
   background: #0d4e99;

   /* Gradients for newer browsers (including IE6!) */
   background: linear-gradient(to bottom,  #0d4e99 0%,#8bbee5 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d4e99'
      , endColorstr='#8bbee5',GradientType=0 );

   /* Remove super ugly border.  For IE8-, stick with mostly ugly plain black */
   border: 1px solid black;

   /* Subtle translucent border for newer browsers) */
   border: 1px solid rgba(0,0,0,0.15);

   /* Prevent ugly dotted outline on click/focus in IE/FFX,
   yellow box outline in Chrome */   
   outline: 0;

   /* Keep buttons aligned vertically even on padding changes */
   vertical-align: middle;

   /* Subtle rounding of corners (more pixels is less subtle) */
   border-radius: 2px;
}

/* Buttons look the same when hovered over and focused */
.final:hover, .final:focus {
   /* Make more readable with lighter background */
   color: black;

   /* Lighten background to highlight button.
   Lets the user know clicking will activate it */
   background: -webkit-linear-gradient(top, hsl(212,84%,48%) 0%,hsl(206,64%,87%) 100%);
   background: linear-gradient(to bottom, hsl(212,84%,48%) 0%,hsl(206,64%,87%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1474E1',
      endColorstr='#C9E1F3',GradientType=0);
}

/* FFX - remove pesky inner dotted border and extra padding from buttons */
.final::-moz-focus-inner {
   border: 0;
   padding: 0;
   margin: 0;
}

/* When clicked ... */
.final:active {
   /* Create a "clicked" look with internal shadow */
   box-shadow: inset 0 2px 4px rgba(0,0,0,.45);

   /* ...and by moving the text down and to the right */
   padding: 9px 7px 7px 9px;
}

/* Links need a couple additional rules to look and act
identical to buttons */
a.final {
   /* Get rid of the usual underline */
   text-decoration: none;

   /* Move text down and right on click instead of up */
   display: inline-block;
}

1-gradient-bg.css

.solid, .gradient {
   /* hsl(212, 84%, 33%) */
   background: #0d4e99;
   color: white;
   padding: 8px;
}

/* Created with http://www.colorzilla.com/gradient-editor/ */
.gradient {
   background: linear-gradient(to bottom, hsl(212,84%,33%) 0%,hsl(206,64%,72%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d4e99',
      endColorstr='#8bbee5',GradientType=0);
}

2-hover-state.css

/* Changes styles when moused over.  Rule is broadly supported,
even by older IE versions.  Simply add `:hover` to ruleset */

.solid:hover {
   color: black;
   background-color: hsl(212, 84%, 48%);
}
.gradient:hover {
   color: black;
   background: linear-gradient(to bottom, hsl(212,84%,48%) 0%,hsl(206,64%,87%) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1474E1',
      endColorstr='#C9E1F3',GradientType=0);
}

3-border-types.css

.subtle {
   border: 1px solid black; /* For IE8- */
   border: 1px solid rgba(0,0,0,0.15);
}
.outset {
   border: 2px outset hsl(208, 75%, 60%);
}
.none {
   border: 0;
}

4-border-radius.css

.subtle-radius {
   border-radius: 2px;
}
.roundy-radius {
   border-radius: 5px;
}
.percent-radius {
   border-radius: 25%;
}

.em-radius {
   border-radius: .5em;

   /* Pixel padding has a massive effect on
   button size if the font is very small.
   This affects the look of the radius compared
   to a much larger button */
   padding: .25em;
}

5-active-focus-state.css

.active {
   /* Changing the top padding increases total height for some reason
   You should use this on all buttons where the top padding will be
   different for other buttons on the same like
   (e.g. due to the active state) */
   vertical-align: middle;
}
.active:active {
   /* Provides a subtle, "clicked" look */
   box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
   /* Moves the text a bit to make it look clicked.  IE does a good job
   of this on its own, so it's mostly for other browsers.  Not necessary
   either as the inset shadow may be sufficient. */
   padding: 9px 7px 7px 9px;
}
.focus {
   /* Prevent pesky dotted outline in IE/FFX and yellow border in Chrome
   when focused/clicked */
   outline: 0;
}
.focus:focus {
   /* same rules as .gradient:hover go here */
}
.focus::-moz-focus-inner {
   /* Prevent FFX from adding pesky internal dotted outline as well as
   additional internal padding */
   border: 0;
   padding: 0;
   margin: 0;
}

6-hsl.css

.hsl1, .hsl2, .hsl3, .hsl4, .hsl5, .hsl6, .hsl7, .hsl8, .hsl9, .hsl10 {
   width: 50px;
   height: 30px;
}
.hsl1 {
   background-color: hsl(0, 100%, 50%);
}
.hsl2 {
   /* 100% lightness is white */
   background-color: hsl(0, 25%, 100%);
}
.hsl3 {
   /* 0% lightness is black */
   background-color: hsl(0, 0%, 0%);
}
.hsl4 {
   /* 0% saturation is gray, varied by lightness */
   background-color: hsl(120, 0%, 75%);
}
.hsl5 {
   /* Change in degree changes color */
   background-color: hsl(120, 100%, 50%);
}
/* Lower saturation is more gray scale */
.hsl6 {
   background-color: hsl(0, 50%, 50%);
}
.hsl7 {
   background-color: hsl(120, 50%, 50%);
}
/* Lightness changes adjust brightness and darkness */
.hsl8 {
   background-color: hsl(240, 100%, 25%);
}
.hsl9 {
   background-color: hsl(230, 100%, 75%);
}
.hsl10 {
   /* Lower saturation and higher brightness creates a pastel color */
   background-color: hsl(270, 50%, 85%);
}