Material Design Button

index.html

<div class='gallery'>
  <div class='button'>
    +
  </div>
  <div class='button-container'>
  </div>
  <ul>
    <li><span class='glyphicon glyphicon-file'></span></li>
    <li><span class='glyphicon glyphicon-camera'></span></li>
    <li><span class='glyphicon glyphicon-picture'></span></li>
    <li><span class='glyphicon glyphicon-paperclip'></span></li>
  </ul>
</div>
<p class='text-center'>Inspired from <a href='https://dribbble.com/shots/1887127-Material-Design-Floating-button-Gif?list=searches&offset=10' target='_blank'>Here</a> </p>

Material Design Button.markdown

Material Design Button

This is an implementation of the menu found here: https://dribbble.com/shots/1887127-Material-Design-Floating-button-Gif?list=searches&offset=10

A Pen by vivek kaarthek on CodePen.

License.

script.js

$(document).ready(function() {
  $('.button').on('click', function(ev) {
    $('.button').toggleClass('active');
  })
});

scripts

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

style.css

@import 'bourbon';
/* original colors
$yellow : #FFFC00;
$black : #161717;
*/
$yellow : #fff;
$black : #303F9F;

$li_time:0.3s;
$scale_time:0.3s;
$rot_time:.5s;

html,
body {  
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  line-height:normal;
  background:#f0f0f0;
}
.gallery{
  width:400px;
  height:300px;
  border:20px solid #fff;
  overflow:hidden;
  background: $black;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  margin:20px auto;
}
.button_common{
  position: relative;
  width: 60px;
  height: 60px;
  left: 50%;
  top: 50%;
  margin-top: -30px;
  margin-left: -30px;
  border-radius: 50%;
}

.button {
  position: relative;
  @extend .button_common;
  box-sizing: border-box;  /*background:rgba(255,255,255,0.7);*/  
  color: $black;
  font-size: 30px;
  font-weight:bold;
  padding: 12px;
  text-align: center;
  z-index: 100;
  @include transition-property(transform,background);
  @include transition-duration($rot_time);
  @include transition-timing-function(ease);
  + .button-container {
    background: $yellow;
    @extend .button_common;
    margin-top:-60px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    @include transition-property(transform);
    @include transition-duration($scale_time);
    @include transition-timing-function(ease); 
    z-index: 10;
    + ul {
        list-style-type:none;
        font-size:24px;
        @extend .button_common;
        margin-top:-60px;
        z-index:50;
        text-align:center;
        color:$black;
        li {              
          display:block;
          width:60px;
          height:60px;
          padding:15px;
          border-radius:50%;          
          position:absolute;
          left:0px;
          top:0px; 
          opacity:0;
          @include transition-property( background,color,opacity,left,top);
          @include transition-duration($li_time);
          @include transition-timing-function(ease);
          &:hover{
            cursor:pointer;
            background:$black;
            color:$yellow;
          }
        }
    }
  }
  &:hover{
    cursor:pointer;
  }
}

.button.active {  
  @include transform(rotate(135deg));
  &:hover{
    cursor:pointer;
    background:rgba(0,0,0,0.1);
  }
  + .button-container {
    cursor: pointer;
    @include transform(scale(10));
    + ul {      
      li{
        opacity:1;
      }
      li:nth-child(1){
        left:-60px;
        top:-60px;
      }
      li:nth-child(2){
        left:60px;
        top:-60px;
      }
      li:nth-child(3){
        left:60px;
        top:60px;
      }
      li:nth-child(4){
        left:-60px;
        top:60px;
      }
    }
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />