Unique Inline Radio Buttons

Learn how to create stylish inline radio buttons with our comprehensive guide. Discover how to use HTML and CSS to design modern, clean, and visually appealing radio buttons for your forms.

Preview
Code

<div class="radio-container">
        <input type="radio" id="radio1" name="unique-radio" class="radio-input">
        <label for="radio1" class="radio-label">Option 1</label>
        
        <input type="radio" id="radio2" name="unique-radio" class="radio-input">
        <label for="radio2" class="radio-label">Option 2</label>
        
        <input type="radio" id="radio3" name="unique-radio" class="radio-input">
        <label for="radio3" class="radio-label">Option 3</label>
    </div>

/* Basic Reset */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* Container for radio buttons */
.radio-container {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

/* Hide default radio buttons */
.radio-input {
    display: none;
}

/* Label styling */
.radio-label {
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 20px;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 25px;
    background-color: #ffffff;
    border: 2px solid #ccc;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Custom radio button styling */
.radio-label::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
    border: 2px solid #888;
    margin-right: 10px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Change radio button style on checked state */
.radio-input:checked + .radio-label::before {
    background-color: #4caf50;
    border-color: #4caf50;
}

/* Change label background color on hover */
.radio-label:hover {
    background-color: #f0f0f0;
}

/* Adjust the label for checked state */
.radio-input:checked + .radio-label {
    border-color: #4caf50;
}

```
No need of JavaScript
```

Introduction

In this guide, we'll create a unique and stylish radio button using HTML and CSS. Unlike standard radio buttons, our design will feature a modern look with custom styling and animations. This design will enhance the visual appeal of your forms and make them stand out.

Steps to Copy the Code

HTML Structure: Create the basic HTML structure for the radio button and its label.
CSS Styling: Style the radio button with custom design and animations.

Conclusion

By following the steps in this guide, you have created a unique radio button with custom styling and animations. This design improves the visual appeal of your forms and enhances the user experience. You can further customize the radio button to fit your website’s theme and style.

Feel free to integrate this code into your project and adjust the colors and sizes as needed to suit your design preferences.