Introduction
In this tutorial, I'll teach you how to design and implement custom radio buttons styled with a Neumorphic (soft and realistic) effect using HTML and CSS.
Radio buttons are commonly used in forms to allow users to select one option from a set. We'll create a visually appealing design that enhances user interaction and adds a modern touch to your web projects.
To begin, we'll set up our project by creating two essential files: index.html and style.css. The HTML file (index.html) will contain the structure of our webpage, while the CSS file (style.css) will handle the styling to achieve the desired Neumorphic radio button effect.
Html Code Explanation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Radio Button with CSS</title> <!-- Page title -->
<link rel="stylesheet" href="style.css"> <!-- Link to external CSS file -->
</head>
<body>
</body>
</html><!DOCTYPE html>: Declares the document type and version of HTML. <html lang="en">: Defines the root element of the HTML document with the language set to English.
<head>: Contains metadata like character set, viewport settings, and the page title.
<meta charset="UTF-8">: Sets the character encoding to UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design. <title>Custom Radio Button with CSS</title>: Sets the title of the webpage.
<link rel="stylesheet" href="style.css">: Links the HTML file to an external CSS file for styling.
<body>: Contains the visible content of the webpage.
<div class="wrapper">
<div class="glass"></div> <!-- Glass effect background -->
<div class="selector">
<!-- Radio button option 1 -->
</div>
</div>A <div> with class .wrapper contains our radio button interface. Within this wrapper, there's a .glass div for the glass-like background and a selector div to hold the radio button options.
<div class="choice">
<div>
<input type="radio" name="number-selector" id="one" class="circle" checked="true">
<div class="ball"></div> <!-- Custom radio button indicator --></div>
</div>
</div>Each .choice div represents an individual radio button option, consisting of an <input> element with type="radio" and a custom class circle, along with a <div> for the custom indicator (ball) of the radio button.
CSS Code Explanation
Let's dive deeper into the CSS code used for styling the custom Neumorphic radio buttons
/* Global styles for HTML and body */
html, body {
display: grid;
height: 100%;
place-items: center;
background-color: rgb(205, 215, 215);
}display: grid;: Sets the display mode to CSS Grid, allowing for flexible layout management. height: 100%;: Sets the height of the HTML and body elements to 100% of the viewport height. place-items: center;: Centers the content vertically and horizontally within the viewport. background-color: rgb(205, 215, 215);: Sets the background color of the webpage to a light grayish-blue.
/* Wrapper for the radio button selector */
.wrapper {
display: flex;
height: 210px;
align-items: center;
}display: flex;: Uses Flexbox layout for the .wrapper container, allowing items to be laid out in a row or column. height: 210px;: Sets the height of the .wrapper container to 210 pixels. align-items: center;: Centers the items vertically within the .wrapper container.
/* Glass effect background */
.glass {
z-index: 2;
height: 110%;
width: 95px;
margin-right: 25px;
background-color: rgba(189, 190, 190, 0.3);
border-radius: 35px;
box-shadow: rgba(50, 50, 93, 0.2) 0px 25px 50px -10px,
rgba(0, 0, 0, 0.25) 0px 10px 30px -15px,
rgba(10, 37, 64, 0.26) 0px -2px 6px 0px inset;
backdrop-filter: blur(8px);
}
z-index: 2;: Sets the stacking order of the .glass element above other elements. height: 110%;: Increases the height of the .glass element slightly to create an overlapping effect. width: 95px;: Sets the width of the .glass element to 95 pixels. margin-right: 25px;: Adds spacing on the right side of the .glass element. background-color: rgba(189, 190, 190, 0.3);: Sets the background color of the .glass element with some transparency. border-radius: 35px;: Rounds the corners of the .glass element. box-shadow: Applies multiple box shadows to create depth and a glass-like effect. backdrop-filter: blur(8px);: Applies a blur effect to the background behind the .glass element.
/* Container for radio button options */
.selector {
display: flex;
flex-direction: column;
}
/* Styling for each radio button option */
.choice {
margin: 10px 0 10px 0;
display: flex;
align-items: center;
}
display: flex;: Configures the .selector container as a Flexbox container. flex-direction: column;: Arranges the child elements (radio button options) in a vertical column. margin: 10px 0 10px 0;: Sets the margin above and below each .choice element to 10 pixels. display: flex;: Configures the .choice element as a Flexbox container. align-items: center;: Centers the child elements vertically within each .choice element.
/* Styling for the radio button input */
.choice > div {
position: relative;
width: 41px;
height: 41px;
margin-right: 15px;
z-index: 0;
}
.circle {
appearance: none;
height: 100%;
width: 100%;
border-radius: 100%;
border: 9px solid rgba(245, 245, 245, 0.45);
cursor: pointer;
box-shadow: 0px 0px 20px -13px gray,
0px 0px 20px -14px gray inset;
}
.choice > div: Styles the container <div> within each .choice element. position: relative;: Positions the <div> element relative to its normal position. width: 41px; height: 41px;: Sets the dimensions of the container <div>. margin-right: 15px;: Adds spacing on the right side of the container <div>. z-index: 0;: Sets the stacking order of the container <div> to the default level.
.circle: Styles the radio button <input> element with custom appearance. appearance: none;: Hides the default appearance of the radio button. height: 100%; width: 100%;: Sets the dimensions of the radio button to fill its container. border-radius: 100%;: Makes the radio button round. border: 9px solid rgba(245, 245, 245, 0.45);: Sets the border style with transparency. cursor: pointer;: Changes the cursor to a pointer on hover. box-shadow: Adds box shadows to the radio button for depth and Neumorphic effect.
/* Styling for the custom radio button indicator */
.ball {
z-index: 1;
position: absolute;
inset: 0;
transform: translateX(-95px);
border-radius: 100%;
background-color: rgb(232, 232, 232);
transition: transform 800ms cubic-bezier(1, -0.4, 0, 0.4);
box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
rgba(0, 0, 0, 0.1) 0px -40px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px,
0px -1px 15px -8px rgba(0, 0, 0, 0.09);
}.ball: Styles the custom indicator (ball) for the radio button. z-index: 1;: Sets the stacking order of the ball element above other elements. position: absolute;: Positions the ball element relative to its nearest positioned ancestor. inset: 0;: Sets all edges of the ball element to 0, aligning it perfectly within its container. transform: translateX(-95px);: Moves the ball element outside the radio button initially. border-radius: 100%;: Makes the ball element round. background-color: rgb(232, 232, 232);: Sets the background color of the ball. transition: transform 800ms cubic-bezier(1, -0.4, 0, 0.4);: Defines a smooth transition effect for the transform property. box-shadow: Adds multiple box shadows to create depth and Neumorphic effect to the ball.
This detailed explanation covers each CSS property used in our custom radio button project, explaining how they contribute to the overall Neumorphic design and interactivity of the radio buttons on our webpage. Feel free to adjust these properties and experiment with different values to customize the appearance and behavior of your own radio button elements!
Conclusion
In conclusion, this project demonstrates how to create custom Neumorphic-styled radio buttons using HTML and CSS. By combining HTML for structure and CSS for styling, we achieved a visually appealing design with interactive radio button elements. The HTML markup defines the layout and content structure of our webpage, while the CSS stylesheet applies styles and effects to enhance the appearance of radio buttons and other elements. This tutorial introduces fundamental HTML and CSS concepts such as element structure, attributes, classes, and styling properties, showcasing the versatility of CSS for customizing the look and feel of web interfaces. Feel free to experiment with different styles and properties to create your own unique radio button designs!
Download Source Code: