<div class="icon-wrapper">
  <button id="click-me" class="icon-wrapper--plus"><span class="fa fa-plus"></span></button>
  <div class="reveal">
    <button class="icon-wrapper--edit reveal">Edit</button>
    <button class="icon-wrapper--new reveal">Create</button>
    <button class="icon-wrapper--delete reveal">Trash</button>
  </div>
</div>
@mixin -buttons-reveal($grow: grow) {
  $animation-name: fade-in;
  $animation-timing-function: ease-out;
  @if $grow != grow {
    $animation-name: fade-out;
    $animation-timing-function: ease-in;
  }
  animation-name: $animation-name;
  animation-duration: .75s;
  animation-timing-function: $animation-timing-function;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  
  button {
    text-align: center;
    margin: 1em;
    font-size: 18px;
    &:focus {
      outline: 0;
    }
    &:active {
      box-shadow: 0 0 5px gray;
    }
  }
  div.reveal {
    border: none;
    
    button {
      padding: 0.35em;
      width: 70px;
      height: 52px;
      border: none;
    }
  }
  > div.reveal:not(.active):not(.removing) {
    opacity: 0;
  }
  > div.reveal.active {
    @include -buttons-reveal(grow);
  }
  > div.reveal.removing {
    @include -buttons-reveal(fade);
  }
  &--plus {
    color: black;
    border: 1px solid lightblue;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    &:focus {
      box-shadow: 0 0 2px gray;
    }
    &:active {
      box-shadow: 0 0 5px gray;
    }
  }
  &--edit {
    background-color: red;
    color: white;
  }
  &--new {
    background-color: blue;
    color: white;
  }  
  &--delete {
    background-color: green;
    color: white;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
let clickIcon = document.getElementById('click-me');
let revealWrapper = document.querySelector('.reveal');
clickIcon.addEventListener('click', () => {
  if (revealWrapper.classList.contains('active')) {
    revealWrapper.className += ' removing';
    setTimeout(function() {
      revealWrapper.className = revealWrapper.className.replace(' active removing', '');    
    }, 300);

  } else { 
    revealWrapper.className += ' active'; 
  }
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.