Web Design and Web Development Tutorials

Post Page Advertisement [Top]


Hello friends, I hope you are well. In this blog post, you will learn how to create and customize a radio button using only HTML & CSS. 

Amazing Custom Radio Button | HTML & CSS Video Tutorial:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Radio Button</title>
    <link rel="stylesheet" href="style.css">
    <input type="radio" class="radio-button" label="Option 1" name="radiobtn" checked>
    <input type="radio" class="radio-button" label="Option 2" name="radiobtn">


    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;

    background-color: #2d3436;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;

    appearance: none;
    border: 2px solid #ddd;
    padding: 14px 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;

    content: "";
    background-color: #ddd;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    transition: border .2s linear;

    content: attr(label);
    color: #ddd;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 500;

    background-color: #e17055;
    border-color: #e17055;

    border: 4px solid #ddd;
    background-color: #e17055;

No comments:

Post a Comment

Bottom Ad [Post Page]