JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bot">
  <h2>Avalie nosso site</h2>
  <button id="azul">
    <span class="fa fa-thumbs-o-up fa-3x" style="color: navy;"></span>
  </button>
  <button id="red">
    <span class="fa fa-thumbs-o-down fa-3x" style="color: red;"></span>
  </button>

CSS

button {
  border: none;
  background-color: #ded268;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0px 8px #666;
  cursor: pointer;
  margin-right: 10px;
  vertical-align: top; // Adicione essa propriedade
}

#azul:active {
  background-color: skyblue;
  cursor: pointer;
  box-shadow: 0px 5px dimgray;
  margin-top: 3px;  // Ajuste a margin-top como desejar
                    // box-shadow inicial: 8px
                    // box-shadow :active: 5px
                    // 8px - 5px = 3px
                    // (Me apague, por favor :D)
}

#red:active {
  background-color: tomato;
  cursor: pointer;
  box-shadow: 0px 5px dimgray;
  margin-top: 3px;  // Mesma regra do seletor anterior
}