Button +/x flyout

Button click, other smaller buttons fly out. Click again to fly in

by Thomas Orthbandt

HTML

<div id="circle-mod">
  <div id="container-circle">
    <div id="button-1" class="btn">
      <div><span>Like</span></div>
    </div>
    <div id="button-2" class="btn">
      <div><span>+1</span></div>
    </div>
    <div id="button-3" class="btn">
      <div><span>Tweet</span></div>
    </div>
    <div id="button-4" class="btn">
      <div><span>Email</span></div>
    </div>
    <div id="button-5" class="btn">
      <div><span>&hearts;</span></div>
    </div>
    <div id="base-button">
      <div>
        <span>+</span>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #ddd;
  font-family: sans-serif;
}

#circle-mod {
  left: 150px;
  position: absolute;
  top: 10px;
}

#container-circle {
  height: 100px;
  position: relative;
  width: 100px;
}

#base-button {
  background: #fff;
  border-radius: 50px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
  left: 0;
  height: 80px;
  padding: 0;
  position: absolute;
  top: 0;
  width: 80px;
}

#base-button div span {
  display: block;
  height: 70px;
  transform: rotate(0);
  transition: all 400ms;
}

/* rotate the base-button */
#base-button.open div span {
  transform: rotate(660deg);
}

#base-button div {
  background: #db3a2b;
  /* Old browsers */
  background: linear-gradient(top, #db3a2b 0%, #cf0404 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #db3a2b 0%, #cf0404 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, #db3a2b 0%, #cf0404 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, #db3a2b 0%, #cf0404 100%);
  /* Opera 11.10+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #db3a2b), color-stop(100%, #cf0404));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #db3a2b 0%, #cf0404 100%);
  /* Chrome10+, Safari5.1+ */
  border: 1px solid #cf0404;
  border-radius: 45px;
  color: #fff;
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#db3a2b', endColorstr='#cf0404', GradientType=0);
  /* IE6-9 */
  font-size: 40px;
  font-weight: 700;
  height: 70px;
  line-height: 70px;
  margin: 4px;
  padding: 0;
  text-align: center;
  width: 70px;
}

.btn {
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
  border-radius: 25px;
  height: 50px;
  left: 15px;
  position: absolute;
  top: 15px;
  transition: all 250ms;
  width: 50px;
}

.btn.open {
  transition: all 350ms;
  transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1.650);
}

.btn div {
  background: #222;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  height: 40px;
 ...

JavaScript

$(function() {
  var delay = 50,
    delayTime, btns = $('.btn'); // Delay the button

  $('#base-button').toggle(function() { // toggle the base-button
      $(this).addClass('open'); // add the open class
      btns.each(function(i) { // loop through and delay the images 
        delayTime = i * delay;
        var ele = $(this);

        window.setTimeout(function() {
          ele.addClass('open'); // for each element, add open class
        }, delayTime);
      });
    },
    function() {
      $(this).removeClass('open'); // remove open class
      var ii = 0;
      $($(btns).get().reverse()).each(function(i) { // reverse the button order loop
        delayTime = i * delay; // delay the button by 40
        var ele = $(this);
        window.setTimeout(function() {
          ele.removeClass('open'); // for each element, remove open class
        }, delayTime);
      });
    });
})