JSFiddle - React, Tailwind, and code Playground

Blue Buttons with Font Awesome

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css">
<div class="wrap">
  <div class="btn"><i class="icon-ok"></i></div>
  <div class="btn active"><i class="icon-ok"></i></div>
</div>

CSS

body{
  padding-top: 100px;
  background: #CECECE;
}

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

.btn{
  position: relative;
  float: left;
  margin-left: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgb(151,202,218);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk3Y2FkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2OGI2ZDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  box-shadow: inset 0 5px 5px -2px #E1EFF4, 0 0 3px 2px #5A8491, inset 0 -3px 5px -2px #478BA0;
  color: #fff;
  color: transparent;
  text-align: center;
  font-size: 30px;
  line-height: 50px;
  cursor: pointer;
}

.btn:after{
  position:absolute;
  top: -6px;
  left: -6px;
  z-index: -1;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #F9FDFD;
  box-shadow: 0 0 3px 0 #ABB0B2, 0 2px 5px -1px #787E80;
  content: "";
}



.btn.active{
  background: rgb(84,143,163);
  background:...

JavaScript

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