buttons.html

<style>
    .subscribe-button{
        background-color: rgb(200, 0, 0);
        color: white;
        border: none;
        height: 35px;
        width: 105;
        border-radius: 2px;
        cursor: pointer;
        transition: opacity 0.15s;
    }
    
    .subscribe-button:hover{
        opacity: 0.8;
    }

    .subscribe-button:active{
        opacity: 0.5;
    }

    

    .join-button{
        background-color: white;
        border-color: rgb(41, 118, 211);
        border-style: solid;
        border-width: 1px;
        color:rgb(41, 118, 211); 
        height: 35px;
        width: 62px;
        border-radius: 2px;
        cursor: pointer;
        margin-right: 8px;
        margin-left: 8px;
        transition: background-color 0.15s,
        color 0.15s;
    }

    .join-button:hover{
        background-color: rgb(41, 118, 211) ;
        color: white;
    }

    .join-button:active{
        opacity: 0.7;
    }
    
    
    .tweet-button{
        background-color: rgb(2, 158, 255);
        color: white;
        border: none;
        height: 36px;
        width: 74px;
        border-radius: 18px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        transition: box-shadow 0.15s;
    }
        
    .tweet-button:hover{
        box-shadow: 5px 5px 10px  rgba(0, 0, 0, 0.15);
    }


</style>

<button class="subscribe-button">SUBSCRIBE</button>

<button class="join-button">JOIN</button>

<button class="tweet-button">TWEET</button>