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.
READ ALSO: Different Types Of Card design
Table Of Contents
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>
Read Also:
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; }
Read Also:
- Snackbar Notification Animation | HTML, CSS And Javascript
- Social Media Buttons Animation With Rotation Hover Effect | HTML And CSS
- Split Image On Hover | HTML And CSS
- Swap Image On Hover | HTML, CSS And jQuery
- To Do List With Checkbox Pure Css | HTML And CSS
- Transparent Navigation Bar Design | HTML And CSS
- Two Image Slider | HTML, CSS And JsPlugin
- Weather Report Card Design | HTML, CSS And Bootstrap
- Website Loader Animation Using GSAP | HTML, CSS And GSAP
Comments
Post a Comment