Button widget

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="material-button-anim">
        <ul class="list-inline" id="options">
          <li class="option">
            <button class="material-button option1" type="button">
                <span class="fa fa-phone" aria-hidden="true"></span>
              </button>
          </li>
          <li class="option">
            <button class="material-button option2" type="button">
                <span class="fa fa-envelope-o" aria-hidden="true"></span>
              </button>
          </li>
          <li class="option">
            <button class="material-button option3" type="button">
                <span class="fa fa-pencil" aria-hidden="true"></span>
              </button>
          </li>
        </ul>
        <button class="material-button material-button-toggle" type="button">
            <span class="fa fa-plus" aria-hidden="true"></span>
          </button>
      </div>
    </div>
  </div>
</div>

CSS

body {
  padding-top: 50px;
}

.material-button-anim {
  position: relative;
  padding: 127px 15px 27px;
  text-align: center;
  max-width: 320px;
  margin: 0 auto 20px;
}

.material-button {
  position: relative;
  top: 0;
  z-index: 1;
  width: 70px;
  height: 70px;
  font-size: 1.5em;
  color: #fff;
  background: #2C98DE;
  border: none;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .275);
  outline: none;
}

.material-button-toggle {
  z-index: 3;
  width: 90px;
  height: 90px;
  margin: 0 auto;
}

.material-button-toggle span {
  -webkit-transform: none;
  transform: none;
  -webkit-transition: -webkit-transform .175s cubic-bazier(.175, .67, .83, .67);
  transition: transform .175s cubic-bazier(.175, .67, .83, .67);
}

.material-button-toggle.open {
  -webkit-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
  -webkit-animation: toggleBtnAnim .175s;
  animation: toggleBtnAnim .175s;
}

.material-button-toggle.open span {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: -webkit-transform .175s cubic-bazier(.175, .67, .83, .67);
  transition: transform .175s cubic-bazier(.175, .67, .83, .67);
}

#options {
  height: 70px;
}

.option {
  position: relative;
}

.option .option1,
.option .option2,
.option .option3 {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.option .option1 {
  -webkit-transform: translate3d(90px, 90px, 0) scale(.8, .8);
  transform: translate3d(90px, 90px, 0) scale(.8, .8);
}

.option .option2 {
  -webkit-transform: translate3d(0, 90px, 0) scale(.8, .8);
  transform: translate3d(0, 90px, 0) scale(.8, .8);
}

.option .option3 {
  -webkit-transform: translate3d(-90px, 90px, 0) scale(.8, .8);
  transform: translate3d(-90px, 90px, 0) scale(.8, .8);
}

.option.scale-on .option1,
.option.scale-on .option2,
.option.scale-on .option3 {
  filter: blur(0);
  -webkit-filter: blur(0);
  -webkit-transform: none;
  transform: none;
 ...

JavaScript

$('.material-button-toggle').click(function() {
   $(this).toggleClass('open');
   $('.option').toggleClass('scale-on');
 });