Neumorphism On/Off Button with HTML and CSS @rayen-code

Rayen

Neumorphism is a popular design trend that combines shapes, gradients, and shadows to create a soft, extruded plastic look. In this tutorial, we'll create a sleek Neumorphism On/Off Button using HTML and CSS. This design is visually appealing and adds a modern touch to your website.




Step 1: HTML Markup:

We'll start by creating the basic HTML structure. We'll use a container to center the button and an icon for the on/off functionality.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphism On Off Button</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Neumorphism On Off Button</h1>
    <div class="switch">
        <input type="checkbox" id="checkbox">
        <label for="checkbox">
            <svg xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                <path
                    d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z" />
            </svg>
        </label>
    </div>
</body>

</html>

Step 2: Styling with CSS:

Next, we'll add the CSS to style the container, button, and icon. We'll use box-shadow to create the Neumorphism effect.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #e0e0e0;
    font-family: sans-serif;
}

h1 {
    color: #454e4b;
}

.switch {
    width: 100px;
    height: 100px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch label {
    width: 100px;
    height: 100px;
    cursor: pointer;
    background: #e0e0e0;
    border-radius: 6px;
    box-shadow:
        5px 5px 6px #acacac,
        -5px -5px 6px #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.switch input:checked+label {
    box-shadow:
        inset 5px 5px 6px #acacac,
        inset -5px -5px 6px #fff;
}


.switch label svg {
    width: 30px;
    height: 30px;
    fill: #0acc8b;
    transition: fill 0.3s;
}

.switch input:checked+label svg {
    fill: #454e4b;
}

Next, we'll add the CSS to style the container, button, and icon. We'll use box-shadow to create the Neumorphism effect.

With this simple HTML and CSS setup, you can create a modern Neumorphism On/Off Button that enhances the visual appeal of your website. This button is easy to implement and adds a stylish, interactive element to your design.


0 Comments