Simple button

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');
});

Simple-button.markdown

Simple button

Design belongs: http://dribbble.com/shots/998348-Check-Buttons-Freebie?list=popular&offset=24

Work perfectly only in Chrome!

A Pen by katmai7 on CodePen.

License.

style.css

html{
  height: 100%;
}

body{
  height: 100%;
  background: #C1D1DA;
  background: linear-gradient(top, rgba(193,209,218,1) 0%,rgba(229,244,251,1) 100%);
}

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


.btn{
  float: left;
  margin-right: 20px;
  width: 40px;
  height: 40px;
  border: 1px solid #A7B9C3;
  border-radius: 50%;
  background: #DBE9F0;
  background: linear-gradient(top, rgba(231,241,249,1) 0%,rgba(200,215,226,1) 100%);
  box-shadow: 0 2px 3px -1px rgba(0,0,0, 1);
  color: #4A5359;
  text-align: center;
   text-shadow: 0 1px 0 #fff;
  font-size: 22px;
  line-height: 40px;
  cursor: pointer;
  transition: color .2s ease-in;
  -webkit-touch-callout: none;
  user-select: none;
}

.btn:hover{
  color: #2ED053;
  
}

.btn.active{
  border-color: #2FAA4C;
  background: #2ED053;
  background: linear-gradient(top, rgba(28,169,58,1) 0%,rgba(77,230,116,1) 100%);
  box-shadow: inset 0 1px 3px -1px rgba(0,0,0, .7);
  color: #fff;
  text-shadow: 0 1px 0 #2B9F45;
  transition: none;
}