<div class="wrap">
  <h1>Squishy-ish Button</h1>
  <input class="btn" type="button" />
</div>

@import "compass/css3";

$blue: #3498db;

body {
  background: lighten($blue,15%);
}

h1 {
  margin-bottom: 50px;
  font-size: 50px;
  color: darken($blue,10%);
}

.wrap {
  margin-top: 100px;
  text-align: center;
}

.btn {
  width:130px;
  height: 130px;
  border-radius: 50%;
    cursor: pointer;
  border: 1px solid lighten($blue,8%);
  background: radial-gradient(ellipse at center, lighten($blue,17%), lighten($blue,12%));
  box-shadow: 0 15px 50px $blue,
              0 -15px 60px lighten($blue,30%),
              inset 0 2px 2px lighten($blue,20%);
  -webkit-transition:all 0.3s ease;

 
  &:active {
    margin-top: 1px;
    -webkit-transform: scale(0.95);
    -webkit-transition:all 0.3s ease;
    outline: none;
    background: radial-gradient(ellipse at center, lighten($blue,15%), lighten($blue,10%));
    box-shadow: 0 15px 80px $blue,
                0 -15px 80px lighten($blue,30%),
                inset 0 -2px 2px lighten($blue,10%);
  }
  &:focus { outline: none; }
}