Designing Custom Radio Buttons with HTML and CSS @rayen-code

Rayen
Radio buttons are a common form element used to gather user input in various web applications. However, their default appearance can sometimes be bland and uninspiring. In this tutorial, we'll walk you through the process of creating custom radio buttons with HTML and CSS to give your forms a stylish and unique look.

Preview

Step 1: HTML Markup:

Start by creating the HTML structure for your radio buttons. Each radio button consists of an <input> element with a type of "radio" and a corresponding <label> element.

HTML Code

<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button Style</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <input type="radio" name="code" id="html">
        <label for="html">HTML</label>

        <input type="radio" name="code" id="css">
        <label for="css">CSS</label>

        <input type="radio" name="code" id="js">
        <label for="js">Java Script</label>


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

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to style the radio buttons. Define the custom styles for the radio buttons and their labels.

CSS Code

/*-------------------- CSS --------------------*/
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: sans-serif;
}
input[type="radio"]{
    display: none;
}

label{
    width: 170px;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: 0.5s;
    border: .1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin: 10px;

    cursor: pointer;
}
label::before{
    content: "";
    height: 20px;
    width: 20px;
    border: 2px solid black;
    border-radius: 50%;
    margin: 0 10px;
    box-sizing: border-box;

    transition: 0.5s;
}

input[type="radio"]:checked + label{
    background: #e0e0e0;
    font-weight: 700;
    letter-spacing: 0.2rem;
    border: .1px solid rgba(0, 0, 0, 0.0);
}

input[type="radio"]:checked + label::before{
    border: 5px solid black;
    background: white;
}
In the CSS section, we've defined styles for both the unchecked and checked states of the radio buttons. The :checked pseudo-class is used to target the checked radio button and apply specific styles to its corresponding label.

You can customize the colors, border styles, padding, and other properties to match your website's design. Feel free to experiment with different styles to create a look that complements your overall aesthetic.

Congratulations! You've successfully designed custom radio buttons using HTML and CSS. This simple customization can add a touch of sophistication to your forms and enhance the user experience. By following this tutorial, you've learned how to transform basic form elements into visually appealing components that contribute to your website's overall design.

Feel free to integrate these custom radio buttons into your web forms and gather user input in a more engaging and attractive way. The skills you've acquired in this tutorial will help you create more visually compelling interfaces and elevate the quality of your web projects.

0 Comments