Buttons in HTML and CSS

first create subscribe button and give it a class

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

add style to button

 <style>
.subscribe-button{
        background-color: rgb(255, 0, 0);
        color:white;
        border: None;
        height: 36px;
        width: 105px;
        border-radius: 3px;
        cursor: pointer;
        margin-right: 8px;
        transition: opacity 0.15s;
    }
 .subscribe-button:hover{
        opacity: 0.8;
    }

    .subscribe-button:active{
        opacity: 0.4;
    }
</style>

create join button and add hovers, transitions

 

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

<style>
.join-button{
        background-color: white;
        border-color: rgb(41, 118, 211);
        border-style: solid;
        border-width: 1px;
        color: rgb(41, 118, 211);
        height: 36px;
        width: 62px;
        border-radius: 2px;
        cursor: pointer;
        transition: background-color 1s, color 1s;
    }
.join-button:hover{
        background-color: rgb(41, 118, 211);
        color: white;
    }

 .join-button:active{
        opacity: 0.7;
    }
</style>

create tweet button

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

<style>
.tweet-button{
        background-color: #1DA1F2;
        color: white;
        border: None;
        height: 36px;
        width: 74px;
        border-radius: 18px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        margin-left: 8px;
        transition: box-shadow 0.15s, color 0.15s;
        
    }

    .tweet-button:hover{
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
    }
</style>