<div class="multi-button">
  <button id="dog"><i class="fas fa-dog"></i></button>
  <button id="cat"><i class="fas fa-cat"></i></button>
  <button id="fish"><i class="fas fa-fish"></i></button>
    <button id="frog"><i class="fas fa-frog"></i></button>
  <button id="spider"><i class="fas fa-spider"></i></button>
</div>

<div class="msg">
  Multi-Buttons #CodepenChallenge by <a href="https://twitter.com/maiko_ssb" target="_blank"><i class="fab fa-twitter"></i> MAIKO</a>
</div>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #172933;
  background-size: cover;
  background-position: center;
  font-family: "helvetica", sans-serif;
}

.multi-button {
  width: 50px;
  overflow: hidden;
}

button {
  display: block;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  border: 1px solid white;
  width: 100%;
  padding: 0.5em 0;
  font-size: 1.5rem;
  &:first-child {
    border-radius: 6px 6px 0 0;
  }
  &:last-child {
    border-radius: 0 0 6px 6px;
  }
  &:hover {
    background: teal;
    color: white;
    &#spider {
      background: darkred;
      cursor: not-allowed;
    }
  }
  &:active,
  &:focus {
    background: white;
    color: black;
  }
}

.msg {
  position: fixed;
  bottom: 0.75em;
  right: 0.75em;
  color: white;
  a {
    color: #ffc900;
  }
}

var bg = document.querySelector("body");

document.getElementById('dog').addEventListener('click', function(){
  bg.style.backgroundImage = "url('https://media.giphy.com/media/138clYUZi54SoE/giphy.gif')";
});
document.getElementById('cat').addEventListener('click', function(){
  bg.style.backgroundImage = "url('https://media.giphy.com/media/61tFzCr556Wsg/giphy.gif')";
})
document.getElementById('fish').addEventListener('click', function(){
  bg.style.backgroundImage = "url('https://media.giphy.com/media/2UtliQZm3mnT6Tea4b/giphy.gif')";
});
document.getElementById('spider').addEventListener('click', function(){
  bg.style.backgroundImage = "url('https://media.giphy.com/media/oXnN2TNSgfJQI/giphy.gif')";
});
document.getElementById('frog').addEventListener('click', function(){
  bg.style.backgroundImage = "url('https://media.giphy.com/media/T2Rx0jWVSYttC/giphy.gif')";
});