hover_shadow_transition.html

<style>

    .subscribe-button
    {
        background-color:rgb(200, 0, 0);
        color:white;
        border: none;
        height: 35px;
        width: 105px;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 8px;
        transition: opacity 0.15s;
    }

    .subscribe-button:hover
    {
        opacity: 0.75;
    }

    .suscribe-button:active
    {
        opacity: 0.4;
    }


    .join-button
    {
        background-color:rgb(255, 255, 255);
        color: rgb(41, 118, 211);
        border-color: rgb(41, 118, 211);
        border-style: solid;
        border-width: 1px;
        height: 35px;
        width: 70px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.15s;
        transition: 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(0, 132, 255);
        color: rgb(255, 255, 255);
        border: none;
        height: 35px;
        width: 75px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: bold;
        font-size: 15;
        margin-left: 8px;
        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>

<!-- Explanation of Key Features:
 
1. Opacity Transition: Applied to .subscribe-button:hover and .join-button:hover, this CSS rule transitions the opacity smoothly (over 0.15 seconds) when the button is hovered over, giving a visual feedback effect.

2. Color and Background Transition: Used in .join-button, this transition (transition: background-color 0.15s, color 0.15s;) ensures a smooth color change (background and text) when the button is hovered over.

3. Box Shadow on Hover: Applied to .tweet-button:hover, the box-shadow property adds a subtle shadow effect to the button when hovered over, creating a visual lift-off effect.

These transitions and effects enhance user experience by providing visual feedback and making interactions with buttons more engaging and intuitive. -->