buttons.html

<style>
  .Subscribe_button{
  background-color: #cc0000;
  color: white;
  border: none;
  padding: 10px 16px;
  transition: opacity 0.15s;
  }
  .Subscribe_button:hover{
    background-color: white;
    color: black;
    border: solid black;
    border-width: 0.5px;
    
  }
  .Subscribe_button:active{
    background-color: gray;
  }
  .join{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
    border-radius: 20px;
    border-style: solid;
    border-width: 2px;
    cursor: pointer;
    margin-right: 8px;
    transition: color 0.3s, background-color 0.3s, opacity 0.1s;
    padding: 10px;
  }
  .join:hover{
    background-color: gray;

  }
  .join:active{
    opacity: 0.8;
  }
  
  .tweet{
    color: white;
    background-color: #1d9bf0;
    border: none;
    height: 40px;
    width: 74px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: box-shadow;
  }
  .tweet:hover{
    box-shadow: 5px 5px 10px gray;
  }
</style>
<p>
  <button class="Subscribe_button">
    SUBSCRIBE
  </button>
  
  <button class="join">
    JOIN
  </button>
  <button class="tweet">
    Tweet
  </button>
</p>