Skip to main content

Neumorphic Checkbox Button design | HTML And CSS

Neumorphic-Checkbox-Button-design

Neumorphic Checkbox Button design | HTML And CSS

One of the Neumorphic designs is checkbox design, already one article available on this site on how to design a checkbox button using simple html and css. But in this article, we are using simple html and css but the added effects on the checkbox input are very different from the simple checkbox button design.

Neumorphic checkbox buttons have become a popular design trend in recent years. These buttons have a soft, slightly 3D look that makes them stand out from more traditional flat buttons. The fundamental idea behind it is, that it has an easy checkbox button design but using of "box-shadow" effect of the button changed the effect.

This effect is more popular nowadays and known as the Neumorphic effect. Neumorphic checkbox buttons are typically made using HTML and CSS. The HTML code defines the button's structure, while the CSS code defines its styling. To create a neumorphic checkbox button, you'll need to use a few HTML elements and CSS properties.

The first step is to create a basic HTML button element. Then, you'll need to add some CSS styling to give it the neumorphic look. This can be done by adding a box-shadow and a border-radius. Finally, you'll need to add a bit of extra CSS to make the button look 3D.

With a few simple HTML and CSS code snippets, you can easily create neumorphic checkbox buttons for your website or app.

You can visit all Neumorphic effect animations using this link. There are many ways to design animated buttons you can check this article for awesome button animations. Let's begin the article.

For more button animations you can follow the button playlist.

You can read interesting articles on web development.

READ ALSO:

01. All Card design Tutorials

 

01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Neumorphic Checkbox Button design | Rustcode</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>

One of the most useful links which are going to be included in this html file is the icon link because the check box shows some changes on hover and click on the checkbox icon. It will automatically change its state. To animate all those effects we need icons, we can do all this using the link below.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 

 

02. HTML

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <title>Neumorphic Checkbox Button design | Rustcode</title>
</head>

<body>
  
<div class="container">
  <div class="components">
     <div class="checkbox">

      <div class="first-checkbox-container">
        <input id="checkbox-01" type="checkbox">
        <label for="checkbox-01">
          <i class="material-icons">done</i></label>
      </div>

      <div class="second-checkbox-container">
        <input id="checkbox-02" type="checkbox" checked>
        <label for="checkbox-02">
          <i class="material-icons">done</i></label>
      </div>

    </div>
    
  </div>
</div>
    
</body>
</html>

 

03. CSS

:root {
  --primary: #6d5dfc;
  --primary-light: #8abdff;  
  --primary-dark: #5b0eeb;
  --white: #FFFFFF;
  --greyLight-1: #E4EBF5;
  --greyLight-2: #c8d0e7;
  --greyLight-3: #bec8e4;
  --greyDark: #9baacf;
}


.container {
  display: flex;
  background: var(--greyLight-1);
}

.components {
  padding: 50px;
}


.switch-container {
  display:flex;
  flex-direction: row-reverse;
  justify-content: left;
  align-items: flex-start;
}


.checkbox {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: repeat(2, 6rem);
  grid-gap: 3rem;
  justify-content: center;
}

.checkbox input {
  display: none;
}

.first-checkbox-container, .second-checkbox-container {
  width: 6rem;
  display: flex;
  justify-content: center;
}

.first-checkbox-container label, .second-checkbox-container label {
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  width: 2.8rem;
  height: 2.8rem;
}

.first-checkbox-container label:hover i, .second-checkbox-container label:hover i {
  color: var(--primary);
}

.first-checkbox-container label i, .second-checkbox-container label i {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--greyDark);
  transition: 0.3s ease;
}

.first-checkbox-container input:checked ~ label, .second-checkbox-container input:checked ~ label {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}

.first-checkbox-container input:checked ~ label i, .second-checkbox-container input:checked ~ label i {
  color: var(--primary);
}

 

Output:

Checkbox-button-Demo

 

USEFUL POSTS:

  1. 12+ Best Competitive Coding Challenge Websites
  2. 04+ Code Editing Software For Web Developers
  3. 05+ Important Chrome Extensions For Graphics Designers
  4. 10+ Websites To Download Free Stock Images

Comments