.float-button-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 70px;
  width: 70px;
  cursor: pointer;
}
.open-button {
  position: fixed;
  background: #ff0000;
  height: 70px;
  width: 70px;
  bottom: 0;
  transform: scale(0.8, 0.8);
  border-radius: 100px;
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.open-button:before, .item01:before, .item02:before, .item03:before, .item04:before, .item05:before {
  position: fixed;
  font-family: "FontAwesome";
  font-size: 2rem;
  top: 50%;
  left: 50%;
  color: white;
  transform: translate(-50%, -50%);
}
.open-button:before {
  content: "\f141";
}
.item01:before {
  content: "\f232";
}
.item02:before {
  content: "\f09a";
}
.item03:before {
  content: "\f099";
}
.item04:before {
  content: "\f16d";
}
.item05:before {
  content: "\f095";
}
.item01, .item02, .item03, .item04, .item05  {
  position: fixed;
  background: #ff0000;
  height: 80px;
  width: 80px;
  border-radius: 100px;
  bottom: 0;
  transform: scale(0.4, 0.4);
  transition: all 0.3s cubic-bezier(0.68, -0.15, 0.265, 1.15);
}
.item01:hover, .item02:hover, .item03:hover, .item04:hover, .item05:hover {
  background: #ff0000;
}
.float-button-container:hover {
  height: 100%;
}
.float-button-container:hover .open-button {
  transform: scale(.5, .5);
}
.float-button-container:hover .item01,
.float-button-container:hover .item02,
.float-button-container:hover .item03,
.float-button-container:hover .item04,
.float-button-container:hover .item05 {
  transform: scale(0.6, 0.6);
}
.float-button-container:hover .item01 {
  bottom: 90px;
}
.float-button-container:hover .item02 {
  bottom: 160px;
}
.float-button-container:hover .item03 {
  bottom: 230px;
}
.float-button-container:hover .item04 {
  bottom: 300px;
}
.float-button-container:hover .item05 {
  bottom: 370px;
}