<div class="float-actions">
        <div class="btn-group">
          <button type="button" class="btn btn-success btn-circle dropdown-toggle">
            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul class="float-dots-menu">
            <li>
              <button class="btn-circle btn btn-primary" href="#">
                <i class="fa fa-bell" aria-hidden="true"></i>
              </button>
            </li>
            <li>
              <button class="btn-circle btn btn-success" href="#">
                <i class="fa fa-tags" aria-hidden="true"></i>
              </button>
            </li>
            <li>
              <button class="btn-circle btn btn-info" href="#">
                <i class="fa fa-upload" aria-hidden="true"></i>
              </button>
            </li>
            <li>
              <button class="btn-circle btn btn-warning btn-reminders" type="button">
                <i class="fa fa-sticky-note-o" aria-hidden="true"></i>
              </button>
            </li>
          </ul>
        </div>
      </div>

// Float buttons options
.float-actions {
  z-index: 1030;
  position: fixed;
  right: 20px;
  bottom: 20px;
  .btn {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  }
  .btn-circle {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    span {
      font-size: 1.5rem;
    }
  }
  .dropdown-toggle {
    i {
        font-size: 30px;
        color: #ffffff;
        margin: 7px;
      }
  }
  .dropdown-toggle::after {
    content: "";
    display: none;
  }
  .float-dots-menu {
    border: none;
    box-shadow: none;
    min-width: 60px;
    background: none;
    text-align: center;
    position: absolute;
    bottom: 60px;
    list-style-type: none;
    padding: 0;
    margin-bottom: 0;
    li:last-child {
      margin-bottom: 5px;
    }
    .btn-circle {
      width: 40px;
      height: 40px;
      margin: 7px auto;
      text-align: center;
      padding: 0px;
      transform: scale(0.4) translateY(40px) translateX(0px);
      opacity: 0;
      -webkit-transition: all 300ms ease-in-out;
      -moz-transition: all 300ms ease-in-out;
      -ms-transition: all 300ms ease-in-out;
      -o-transition: all 300ms ease-in-out;
      transition: all 300ms ease-in-out;
      i {
        font-size: 21px;
        color: #ffffff;
        margin: 7px;
      }
      img {
        width: 80%;
        height: auto;
      }
      &:hover {
        background-color: auto;
      }
    }
  }
  .btn-group:hover {
    .float-dots-menu {
      .btn-circle {
        opacity: 1;
        transform: scale(1) translateY(0) translateX(0);
      }
    }
  }
}