<div id='wrapper'>
      <fieldset>
        <h2>Legend:</h2>
        <a type:="checkbox" class='glowBtn'>Waiting</a>
        <a type:="checkbox" class='glowBtn hover'>Hover</a>
        <a type:="checkbox" class='glowBtn active'>Active</a>
        <a type:="checkbox" class='glowBtn Veryactive'>VeryActive</a>
      </fieldset>
      <fieldset>
        <h2>Checkboxes w/ memory!</h2>
        <!-- checkbox one -->
        <input type='checkbox' id='checkbox1-1' checked='checked' name='checkbox'>
        <label for='checkbox1-1'>我</label>
        <!-- checkbox two -->
        <input type='checkbox' id='checkbox1-2' name='checkbox'>
        <label for='checkbox1-2'>你</label>
        <!-- checkbox three -->
        <input type='checkbox' id='checkbox1-3' name='checkbox'>
        <label for='checkbox1-3'>他</label>
        <!-- checkbox three -->
        <input type='checkbox' id='checkbox1-4' name='checkbox'>
        <label for='checkbox1-4'>俄</label>
        <!-- checkbox three -->
        <input type='checkbox' id='checkbox1-5' name='checkbox'>
        <label for='checkbox1-5'>國</label>
        <!-- checkbox three -->
        <input type='checkbox' id='checkbox1-6' name='checkbox'>
        <label for='checkbox1-6'>滴</label>
      </fieldset>
      <fieldset>
        <h2>Box!</h2>
        <div>Hi guys!</div>
      </fieldset>
    </div>
@import "compass/css3";

@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lobster);
body{
  margin: 0;
  padding:0;
  background:url('http://www.bradysammons.com/codepen/darkui/noise.png') repeat;
  padding:30px;
}

a, input[type='checkbox'] + label{
    text-align: center;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Trebuchet MS', Helvetica, sans-serif; 
  }
fieldset{
  border:1px solid #222;
  @include border-radius(8px);
  margin:20px 0 0 0;
  min-height: 90px;
  line-height: 90px;
  position: relative;
  float: left;
  margin-right: 20px;
  padding:20px;
  h2{
    font-family: 'Lobster', cursive;
    font-weight: normal;
    text-shadow:0 1px 0 rgba(255,255,255,.12);
    display: inline-block;
    margin: 0;
    line-height: 1.5;
    position: absolute;
    top: -20px;
    background:url('http://www.bradysammons.com/codepen/darkui/noise.png') repeat;
    padding: 0 5px 0 10px;
  }
}
input[type='checkbox']{
  display: none;
}
$btn_width:110px;
$btn_height:$btn_width * .3;
/* -------------------
  Default State
-------------------- */
a.glowBtn, input[type='checkbox'] + label{
  z-index: 10;
  margin: 0 10px 10px 0;
  width: $btn_width * 1.05;
  height: $btn_height * 1.13;
  line-height: $btn_height * 1.1;
  position: relative;
  font-size: $btn_width * .12;
  letter-spacing: .1em;
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255,255,255,.1);
  font-weight: bold;
  @include background-image(linear-gradient(#111,#000));
  @include border-radius(3px);
  @include box-shadow(
    //-----Button Beveling-----
    //top dark bevel
    0 -1px 0 rgba(0,0,0,.2),
    //full bevel
    0 0 0 1px rgba(0,0,0,.3),
    //bottom highlight bevel
    0 1px 0 rgba(255,255,255,.05),
    //slight outer glow
    0 0 3px rgba(255,255,255,.2));
}

//This is the style for the actual Button
a.glowBtn:after, input[type='checkbox'] + label:after{
  z-index: -1;
  content: '';
  cursor: pointer;
  // center content
  top:$btn_height * .06;
  margin-left: 50%;
  left: -$btn_width /2;
  width: $btn_width;
  height: $btn_height;
  display: block;
  position: absolute;
  @include background-image(linear-gradient(#444,#373738));
  @include box-shadow(
    inset 0 2px 1px -1px rgba(255,255,255,.2),
    inset 0 -2px 1px -1px rgba(0,0,0,.2),
    //-----Drop Shadow-----
    0 12px 12px rgba(0,0,0,.5),
    0 4px 6px rgba(0,0,0,.3));
  @include border-radius(2px);
}
/* -------------------
  Hover States
-------------------- */
a.glowBtn:hover, a.hover, input[type='checkbox'] + label:hover{
  color: #AEAEAE;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
}
a.glowBtn:hover:after, a.hover:after, input[type='checkbox'] + label:hover:after{
  @include background-image(linear-gradient(#545454,#373738));
}
/* -------------------
  Active States
-------------------- */
a.glowBtn:active, a.active,a.active:hover, input[type='checkbox']:checked + label{
  color: #00ccff;
  text-shadow:0 -1px 0 rgba(0,0,0,.3),0 0px 30px rgba(0,255,255,.7);
  @include box-shadow(
    //-----Button Beveling-----
    //top dark bevel
    0 -1px 0 rgba(0,193,255,.2),
    //full bevel
    0 0 0 1px rgba(0,0,0,.4),
    //bottom highlight bevel
    0 1px 0 rgba(255,255,255,.05),
    //slight outer glow
    0 0 20px rgba(0,193,255,.1),
    0 0 30px rgba(0,193,255,.1));
}
a.glowBtn:active, a.active,a.active:hover{
  text-shadow:0 -1px 0 rgba(0,0,0,1),0 0px 30px rgba(0,255,255,1),0 0px 50px rgba(0,255,255,1);
  }
a.glowBtn:active:after, a.active:after,a.active:hover:after, input[type='checkbox']:checked + label:after{
  @include background-image(linear-gradient(#262627, #2d2d2e));
  @include box-shadow(
    inset 0 5px 6px rgba(0,0,0,.3), 
    inset 0 0 4px rgba(0,0,0,.9), 0 0 0 black);
}

/* -------------------
  checkbox Specific Style
-------------------- */
input[type='checkbox'] + label{
  font-family: Arial, sans-serif;
  font-size: $btn_width/4;
  line-height: $btn_width/2;
  letter-spacing: 0;
  width:$btn_width/2;
  height:$btn_width/2;
  //margin: 0;
}
input[type='checkbox'] + label:after{
  top:$btn_height * .08;
  left: (-$btn_width /2)/2.2;
  width:$btn_width/2.2;
  height:$btn_width/2.2;
}
View Compiled
/*==================

This is a rebound of my "Tide Ui" On Dribbble:

http://dribbble.com/shots/745911-Tide-Ui

.toggleClass("colored");
==================*/
.toggleClass("know");

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.