A CodePen by katmai7. Simple check button - Design belongs: http://dribbble.com/shots/998387-Check-Buttons-PSD?list=popular&offset=81 Work perfectly only in Chrome!

index.html

<div class="wrap">
  <div class="btn"><i class="icon-ok"></i></div>
  <div class="btn active"><i class="icon-ok"></i>
 </div>
</div>

script.js

$('.btn').bind('click', function(){
  $(this).toggleClass('active');
});

style.less

html{
  height: 100%;
}

body{
  height: 100%;
  background: #C1D1DA;
  background: #303030;
}

.wrap{
  margin: 100px auto;
  width: 160px;
}


.btn{
  float:left;
  margin-right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(54,54,54,1) 0%,rgba(41,41,41,1) 100%);
  box-shadow: 0 0 3px 0 rgba(0,0,0, .7), inset 0 2px 0 -1px rgba(98, 98,98, .5), 0 3px 7px -3px rgba(0,0,0, .7);
  color: #ADADAD;
  text-align: center;
  font-size: 22px;
  line-height: 50px;
  cursor: pointer;
  transition: color .3s ease;

  &:hover{
    color: #BC2C2C;
  }
  
  &.active{
    background: linear-gradient(to bottom, rgba(137,13,13,1) 0%,rgba(193,69,69,1) 100%);
    box-shadow: 0 0 3px 1px rgba(0,0,0, .4), 0 3px 0 -1px rgba(98, 98,98, .5), inset 0 4px 15px -2px rgba(0,0,0, .5);
    
    &:hover{
      color: #333333;
    }
  }
}