Material Action Button

index.html

<div class="iphone">
  <div class="screen">
    <div class="device">
      <div class="action-box">
        <button class="action-btn"></button>
        <p class="add">+</p>
        <div class="action-sub-btns">
          <button class="sub-btn"><i class="material-icons">videocam</i></button>
          <button class="sub-btn"><i class="material-icons">message</i></button>
          <button class="sub-btn"><i class="material-icons">perm_identity</i></button>
        </div>
      </div>
    </div>
  </div>
  <button class="home" title="Home"></button>
  <span class="speaker" title="Speaker"></span>
  <span class="camera" title="Camera"></span>
  <span class="proximity" title="Proximity Sensor"></span>
  <span class="silence" title="Silence Switch"></span>
  <span class="volume-up" title="Volume Up"></span>
  <span class="volume-down" title="Volume Down"></span>
  <span class="sleep" title="Sleep"></span>
</div>

Material Action Button.markdown

Material Action Button

A html/css material design action button to provide more options to a user

A Pen by C-Rodg on CodePen.

License.

style.css

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  border: none;
  padding: 0;
  outline: none;
  background-color: transparent;
  user-select: none;
}

span {
  box-sizing: border-box;
}

.iphone {
  margin-top: 50px;
  margin-bottom: 20px;
  padding: 10vh 1.5vh;
  border-radius: 6vh;
  position: relative;
  border: 0.5vh solid #525c6b;
}

.screen {
  display: flex;
  min-height: 50vh;
  /*width: 36vh;*/
  align-items: center;
  justify-content: center;
}

.device {
  position: relative;
  width: 375px;
  height: 667px;
  overflow: hidden;
  background: #f6f6f6;
  background: grey;
}

.home,
.camera,
.proximity,
.speaker,
.silence,
.volume-up,
.volume-down,
.sleep {
	position: absolute;
}

.home,
.camera, 
.proximity {
	border-radius: 50%;
}

.speaker,
.silence,
.volume-up,
.volume-down,
.sleep,
.proximity {
	background-color: #525c6b;
}

.home,
.speaker,
.camera,
.proximity {
	left: 50%;
}

.home,
.speaker {
	margin-left: -3vh;
	width: 6vh;
}

.home,
.speaker {
  border: 0.5vh solid #525c6b;
}

.home {
	height: 6vh;
	bottom: 2vh;
}

.speaker {
	top: 4.75vh;
	height: 0.5vh;
	border-radius: 0.5vh;
}

.camera {
	width: 1.5vh;
	height: 1.5vh;
	top: 4.25vh;
	margin-left: -6.5vh;
}

.proximity {
	width: 1vh;
	height: 1vh;
	top: 2vh;
	margin-left: -0.5vh;
}

.silence,
.volume-up,
.volume-down,
.sleep {
	width: 0.5vh;
}

.volume-up,
.volume-down,
.sleep {
	height: 5vh;
}

.silence,
.volume-up,
.volume-down {
	left: -0.75vh;
}

.silence {
	height: 3vh;
	top: 10vh;
}

.volume-up,
.sleep {
	top: 17vh;
}

.volume-down {
	top: 24vh;
}

.sleep {
	right: -0.75vh;
}

.action-box {
  z-index: 1;
}

.add {
  position: absolute;
  font-size: 30px;
  bottom: 18px;
  right: 25px;
  color: white;
  overflow: auto;
  transition: all 0.4s ease-in-out;
}

.action-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #29b4fd;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.28);
  transition: all 0.4s ease-in-out;
  border: none;
}

.action-box:hover .action-btn {
  transition: all 0.6s ease-in-out;
  background: linear-gradient(to top, #29b4fd, rgba(41, 180,253, 1), rgba(41, 180, 253, 1), rgba(41, 180, 253, 0.9), rgba(41, 180, 253, 0.6), rgba(41, 180, 253, 0.3), rgba(41, 180, 253, 0.1), rgba(41, 180, 253, 0));
  transform: translate3d(-162.5px, 0,0) scale(16);
  box-shadow: none;
}

.action-box:hover .add {
  transition: all 0.6s ease-in-out;
  transform: translate3d(-150px,0,0) rotate(-315deg);
}

.action-box:hover .action-sub-btns {
  transition: all 0.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.4s;
  transform: translate3d(0,-160px, 0);
  visibility: visible;
  opacity: 1;
}

.action-sub-btns {
  display: flex;
  position: absolute;
  bottom: -10px;
  left: 80px;
  visibility: hidden;
  opacity: 0;
}

.sub-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #555;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.28);
  margin: 0 15px;
  border: none;
  transition: all 0.3s ease-in-out;
}

.sub-btn:hover {
  animation-name: floating;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: 1tr;
  
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0%);
  }
}