JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<h2><strong>Button</strong> inspired by this <a href=
    "http://dribbble.com/shots/1116676-PSD-Button">dribbble shot</a></h2>

<div class="btn btn-blob">&times;</div>

CSS

body { margin-top: 20px; background: #242527; }
a { text-decoration: none; color: #EC5C93; }
h2 { 
  text-align: center; 
  margin-bottom: 60px; 
  color: #666; color: rgba(255,255,255,0.3); 
}

.btn {
  position: relative;
  cursor: pointer;
  width: 140px;
  height: 140px;
  line-height: 140px;
  background: #25292C;
  margin: 0px auto;
  text-align: center;
  border-radius: 999px;
  color: rgba(155,155,155,1);
  text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);
  font-size: 5em;
  font-family: sans-serif;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 
              inset 3px 15px 45px rgba(255,255,255,0.1),
              inset -1px -1px 2px rgba(0,0,0,0.5), 
              inset -3px -15px 45px rgba(0,0,0,0.2),
              1px 5px 30px -4px rgba(0,0,0,1);
  -webkit-transition: 0.1s ease-out;
  -moz-transition:    0.1s ease-out;
  -o-transition:      0.1s ease-out;
  transition:         0.1s ease-out;
}

.btn:before {
  content: "";
  background: #1A1A1A;
  width: 170px;
  height: 170px;
  position: absolute;
  top: -15px;
  left: -15px;
  z-index: -1;
  border-radius: 999px;
  box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3), 
    inset -5px -15px 40px rgba(255,255,255,0.1),
    inset 1px 1px 2px rgba(0,0,0,0.5), 
    inset 5px 15px 40px rgba(0,0,0,0.2),
    -2px -40px 50px -20px rgba(255,255,255,0.1),
    2px 35px 50px -10px rgba(0,0,0,0.4),
    0px 0px 25px 8px rgba(60,60,60,1);
}

.btn:active {
  color: rgba(0,0,0,0.7);
  text-shadow: 1px 1px 0px rgba(255,255,255,0.15);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 
              inset 3px 15px 45px rgba(0,0,0,0.2),
              inset -1px -1px 2px rgba(0,0,0,0.5), 
              inset -3px -15px 45px rgba(255,255,255,0.1),
              1px 5px 10px -4px rgba(0,0,0,1);
}

.blob, .blob:before {
  -webkit-animation: blob 1s linear;
  -moz-animation:    blob 1s linear;
  -o-animation:      blob 1s linear;
  animation:         blob 1s linear;
}

.blob {
 ...

JavaScript

$(document).ready(function() {
  $('.btn-blob').click(function() {
    $(this).toggleClass('blob');
  });
});