Neumorphism Button HTML & CSS - Neomorphism Style - Web Design @rayen-code

Rayen

Buttons are a crucial element of web design that encourages user interaction. Adding visual feedback when a user hovers over a button can make your website more engaging and user-friendly. In this tutorial, we'll guide you through the process of creating a stylish button with a color change hover effect using HTML and CSS.

Step 1: Setting Up the HTML Structure:

Begin by setting up the basic HTML structure for your button.
Copy/*-------------------- CSS --------------------*/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hard Button Effect : CSS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="buttons">

        <div class="btn active">
            <i class="bi bi-camera"></i>
            <span>Camera</span>
        </div>

        
        <div class="btn">
            <i class="bi bi-camera-reels"></i>
            <span>Video</span>
        </div>
        
        <div class="btn">
            <i class="bi bi-car-front"></i>
            <span>Car</span>
        </div>
        <div class="btn">
            <i class="bi bi-card-image"></i>
            <span>Image</span>
        </div>
        <div class="btn">
            <i class="bi bi-cash-coin"></i>
            <span>Cash</span>
        </div>
        <div class="btn">
            <i class="bi bi-controller"></i>
            <span>Game</span>
        </div>
        
    </div>
</body>

</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) and apply styles to your button. Define the default and hover states for the button. Additionally, set up a transition property to achieve a smooth color change animation on hover. 
Copy/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    background: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.buttons{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
:root{
    --shadow: -8px -8px 15px #ffff, 8px 8px 15px #8888;
}
.btn{
    width: 150px;
    aspect-ratio: 1/1;
    box-shadow: var(--shadow);
    margin: 20px;

    border: 8px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: #1a1a1a;
    text-align: center;
    outline: none;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.1s;
}
.btn:hover{
    color: #e63c1a;
    scale: 1.1;
}

.btn i{
    font-size: 2rem;

}
.btn span{
    font-size: 1.2rem;
}

.btn:active,
.active
{
    box-shadow: var(--shadow),
    inset -8px -8px 15px #ffff,
    inset 8px 8px 15px #8888 ;

    color: #e63c1a;
}


Feel free to customize the button's colors, sizes, and fonts to match your website's design. You can also explore other CSS properties to further enhance the button's appearance, such as adding rounded corners or shadows.

You've successfully created a button with a color change hover effect using HTML and CSS. Adding interactive elements like this to your website can improve user experience and make your site more visually appealing. This simple yet effective effect can be applied to various buttons on your website to encourage user interaction.

By following this tutorial, you've gained a valuable skill in web design that can help you create visually engaging and interactive user interfaces. Incorporate this effect into your website's buttons to create a more dynamic and modern look.


0 Comments