TimesCoding

Learn, Practice, and Excel with our Coding Tutorials!

Creating Modern Stylish Radio Buttons with Custom CSS Tick

May 31, 2024 3 Min read CSS HTML
modern-stylish-radio-button

In this tutorial, we explore a stylish radio button of HTML and CSS that will enhance the user experience of your web forms. Here we are implementing a custom radio button design with coffee-colored backgrounds and bold tick marks, providing a delightful interactive experience for your website visitors.

HTML Code for Radio Buttons

<div class="survey-container">
    <h2>Your favorite tech language:</h2>
    <ul>
        <li>
            <input type="radio" id="option1" name="selector">
            <label for="option1">Python</label>
        </li>
        <li>
            <input type="radio" id="option2" name="selector">
            <label for="option2">JavaScript</label>
        </li>
        <li>
            <input type="radio" id="option3" name="selector">
            <label for="option3">Java</label>
        </li>
    </ul>
</div>

CSS Code for Radio Buttons

body, html {
    height: 100%;
    background: #222222;
    font-family: 'Lato', sans-serif;
}

.survey-container {
    display: block;
    margin: 40px auto;
    width: 500px;
    padding: 20px;
}

h2 {
    color: #AAAAAA;
}

.survey-container ul {
    list-style: none;
    padding: 0;
}

ul li {
    color: #AAAAAA;
    display: flex;
    align-items: center;
    padding: 20px 0; /* Decrease top and bottom padding */
    border-bottom: 1px solid #333;
}

ul li input[type=radio] {
    appearance: none;
    background-color: #D8D8D8; /* Default background color */
    margin-right: 15px; /* Increase margin between button and label */
    border: 2px solid #000; /* Black border color */
    border-radius: 50%; /* Make button circular */
    width: 30px; /* Increase button size */
    height: 30px; /* Increase button size */
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: border 0.25s linear, background-color 0.25s linear; /* Add background-color transition */
}

ul li input[type=radio]:checked {
    background-color: #6F4E37; /* Coffee color */
    border-color: #9ED3A6; /* Change border color on click */
}

ul li input[type=radio]:checked::after {
    content: '\2713';
    font-size: 18px;
    color: #FFFFFF;
    font-weight: bold; /* Make tick sign bold */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ul li label {
    cursor: pointer;
    transition: color 0.25s linear;
}

ul li:hover label {
    color: #FFFFFF;
}

ul li:hover input[type=radio] {
    border-color: #FFFFFF;
    border-width: 4px; /* Increase border width on hover */
}

Tags:

  1. Stylish radio buttons tutorial
  2. Custom radio buttons design
  3. HTML CSS radio button styling
  4. Modern radio button examples
  5. Custom tick mark radio buttons
  6. User-friendly radio button design
  7. CSS techniques for radio buttons
  8. Radio button styling tips
  9. How to create attractive radio buttons
  10. Enhancing form UI with radio buttons
  11. Best practices for radio button design
  12. Creating visually appealing radio buttons
  13. Customizing radio buttons with CSS
  14. Web design tutorial: radio button styling
  15. Interactive radio buttons with CSS transitions
Related Post:
Trendy Website Color Combinations for 2024 − Here are some trending color combinations to consider for your website, including header, footer, sidebar, and content section colors with codes: 1. Balanced Brights: 2..
Create a Stylish Analog Watch with HTML, CSS, and JavaScript − Creating a stylish analog watch using HTML, CSS, and JavaScript involves simulating the appearance and movement of clock hands. We’ll build a simple analog clock.
How to Create a Stylish Digital Watch with HTML, CSS, and JavaScript − Creating a digital watch similar to an Apple Watch using HTML, CSS, and JavaScript involves several steps. We’ll build a simple, functional digital clock that.
Creating a Stylish and Responsive Bootstrap Menu with Colorful Toggle Icon − Below is a simple responsive Bootstrap 5 template that you can use as a starting point for your project. This template includes a stylish &.
Responsive Web Design with CSS: A Short Tutorial − Responsive web design is a crucial aspect of modern web development. It ensures that your website looks and functions well on a variety of devices,.
How to Create a Modern Stylish Accordion with Arrows Using Only HTML and CSS − This modern and stylish accordion is created using only HTML and CSS, featuring smooth transitions and interactive arrows that change direction upon expansion. It’s perfect.
How to Create a Stylish and Modern HTML Select Field Using CSS − Creating a modern and stylish HTML “Select” field involves using CSS to enhance the default styling. Here’s an example of how you can achieve this:.
Modern and Stylish Button with Gradient and Hover Effects − This modern and stylish button features a vibrant gradient background that seamlessly transitions on hover, coupled with a subtle box shadow for added depth. Its.
Creating a Modern Responsive Menu with HTML & CSS Only − Learn how to design a stylish and modern website header section and responsive menu using just HTML and CSS, with a responsive menu that toggles.
Design a Modern and Stylish Login Form using HTML and CSS − This is a modern and stylish login form using HTML and CSS, featuring 3D effects, colorful fields, and a button. The “Not registered? Create an.
Creating a Modern Button with Stylish Hover Effects Using CSS − This is a modern and stylish button with a simple hover effect using CSS. The button has a bold border & the border color will.
How to Create a Colorful Tic-Tac-Toe Game with HTML, CSS and JavaScript − Here’s a colorful Tic-Tac-Toe game implemented using HTML, CSS, and JavaScript only. The game includes a restart button, winner message, and special effects for the.