Skip to main content

Neumorphic Radio Button design | HTML And CSS

Neumorphic-Radio-Button-design

Neumorphic Radio Button design | HTML And CSS

We have already written one radio button article, which is Pill Styled Radio Button. But in this article, we are going to show you have to design Neumorphic radio button animation using html and css only. On this blog, you will find a number of designs that are based on the neumorphic concept, here is the separate playlist.

Neumorphic design has been gaining popularity in recent years, and one area where it has been particularly popular is web design. Neumorphic web elements have a soft, 3D look and feel, and can add a touch of luxury to any website.

As we know Neumorphic effect is nothing but the simple effect that is generated by using "box-shadow". This effect looks cool and fancy for websites, that's why it is more popular nowadays.

One area where neumorphic design can be particularly effective is radio buttons. Radio buttons are already small and unobtrusive elements, so a neumorphic design can make them even more subtle and understated. This can be a great way to add a touch of style to your website without going over the top.

If you're interested in using neumorphic radio buttons on your website, there are a few things to keep in mind. First, make sure that your radio buttons are the right size. They should be small and unobtrusive, so they don't dominate your page. Second, use a light color scheme for your radio buttons. Neumorphic buttons are typically white or light gray, so they blend in with the rest of your page. Finally, pay attention to the overall design of your page. Neumorphic buttons can be a great way to add a touch of luxury, but they should be used sparingly so they don't overwhelm your page.

For more button animations you can follow the button playlist.

You can read interesting articles on web development.

 

 


 

01. HTML STRUCTURE

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

<body>

    main content.

</body>
</html>

 

 

02. HTML

<!DOCTYPE html>
<html>
<head>
  <title>Neumorphic Radio Button design | Rustcode</title>
</head>
<body>
    
<div class="container">
  <div class="components">
<div class="radio">
      <div class="radio-btn-1">
        <input id="radio-1" type="radio"  name="radio" value="1">
        <label for="radio-1"></label>
      </div>
      
      <div class="radio-btn-2">
        <input id="radio-2" type="radio" name="radio" value="2" checked>
        <label for="radio-2"></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;
}

.radio{
  display: flex; 
}

.radio-btn-1 {
  margin-right: 40px;
}

.radio input {
  display: none;
}

.radio-btn-1 input:checked ~ label, .radio-btn-2 input:checked ~ label {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}

.radio-btn-1 input:checked ~ label::after, .radio-btn-2 input:checked ~ label::after {
  background: var(--primary);
}

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

.radio-btn-1 label:hover::after, .radio-btn-2 label:hover::after {
  background: var(--primary);
}

.radio-btn-1 label::after, .radio-btn-2 label::after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--greyDark);
  border-radius: 50%;
  transition: 0.3s ease;
}

 

04. Output:

Neumorphic-Radio-Button-design-demo

 


 

 

Comments