<div class="multi-button"><button>Cut</button><button>Copy</button><button>Paste</button></div>

<div class="options">
  <p id="remove-button">Remove +</p>
  <p id="add-button">Add +</p>
</div>

@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');

$blue-text: #102A43;
$blue-background: #486581;
$white: #D9E2EC;

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Rubik', sans-serif;
  background-color: $blue-background;
  color: $blue-text;
}

.multi-button {
  display: flex;
  box-shadow: 3px 3px 9px rgba(0,0,0,.4);
  width: 450px;
  position: relative;
  background-color: $white;
  border-radius: 5px;
  overflow: hidden;
  transition: width .4s, transform .8s;
  border: 2px solid $blue-text;
  padding: 3px;
  
  span {
    position: absolute;
    opacity: 0;
    z-index: 0;
    height: 100%;
    background-color: $blue-text;
    left: 0;
    top: 0;
    transition: .7s left, .7s right, .2s opacity;
  }
}

button {
  background: transparent;
  font-size: 24px;
  padding: 20px;
  margin: 0;
  z-index: 1;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  width: 150px;
  transition: .2s all, .3s color;
  border-width: 0;
  
  &:hover {
    color: $white;
    width: 175px;
  }
}

.options {
  display: flex;
  margin-top: 15px;
  
  p {
    color: rgba(255,255,255,.4);
    font-size: 48px;
    cursor: pointer;
    margin: 0 10px;
    text-transform: uppercase;
    margin-top: 20px;
    
    &:hover {
      color: rgba(255,255,255,.7);
    }
  }
}

let extraButtons = [
  'Cut',
  'Copy',
  'Paste',
  'Find',
  'Select',
  'Undo',
  'Redo'
]

window.onload = () => {
    let buttons = document.getElementsByTagName('button');
  let menu = document.querySelector('.multi-button');
  menu.innerHTML = '<span></span>' + menu.innerHTML;
  menu.style.width = '450px';
  
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].buttonIndex = i;
    addMouseOverEvent(buttons[i]);
  }
  
  menu.addEventListener('mouseout', e => {
    let buttonBG = document.querySelector('.multi-button > span');
    buttonBG.style.opacity = 0;
  })
  let lastButton = 0;
  function addMouseOverEvent(btn) {
    btn.addEventListener('mouseover', (e) => {
      let buttonBG = document.querySelector('.multi-button > span');
      let offSetWidth = (parseInt(menu.style.width.substring(0,menu.style.width.length - 2)) - 175) / (buttons.length - 1)
      
      buttonBG.style.opacity = 1;
      if (btn.buttonIndex > lastButton) {
        buttonBG.style.right = (offSetWidth * (buttons.length - btn.buttonIndex - 1)) + 'px';
        setTimeout(() => {
          buttonBG.style.left = (offSetWidth * btn.buttonIndex) + 'px';
        }, 200);
      } else if (btn.buttonIndex < lastButton) {
        buttonBG.style.left = (offSetWidth * btn.buttonIndex) + 'px';
        setTimeout(() => {
          buttonBG.style.right = (offSetWidth * (buttons.length - btn.buttonIndex - 1)) + 'px';
        }, 200);
      } else {
        buttonBG.style.left = (offSetWidth * btn.buttonIndex) + 'px';
        buttonBG.style.right = (offSetWidth * (buttons.length - btn.buttonIndex - 1)) + 'px';
      }
      lastButton = btn.buttonIndex;
    });
  }
  
  document.getElementById('add-button').addEventListener('click', () => {
    let newButton = document.createElement("BUTTON");
    newButton.innerHTML = extraButtons[buttons.length] || 'LOREM';
    addMouseOverEvent(newButton);
    menu.style.transform = 'scale(1.1)';
    setTimeout(() => {
    menu.style.transform = 'scale(1)';
    }, 400)
    menu.style.width = (parseInt(menu.style.width.substring(0,menu.style.width.length - 2)) + 150) + 'px';
    menu.appendChild(newButton);
    buttons = document.getElementsByTagName('button');
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].buttonIndex = i;
    }
  })
  
    document.getElementById('remove-button').addEventListener('click', () => {
      menu.removeChild(menu.lastChild);
      menu.style.transform = 'scale(1.1)';
    setTimeout(() => {
    menu.style.transform = 'scale(1)';
    }, 400)
      menu.style.width = (parseInt(menu.style.width.substring(0,menu.style.width.length - 2)) - 150) + 'px';
      buttons = document.getElementsByTagName('button');
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].buttonIndex = i;
    }
    });
}