Beautiful Sliding Radio Buttons Group

Written by @kerixa 9 March 2021

When we want the user to select only one item out of several items, we use a group of radio buttons that are connected and can not be selected at the same time. In the following code, beautiful and stylish sliding radio buttons were included. By selecting each radio button, the background color of the radio button changes to green.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
/** For prettyiness **/
 body {
     font-family: sans-serif;
     margin-top: 50px;
}
/** vars **/
 :root {
     --padding: 2px;
     --radius: 5px;
     --height: 20px;
     --width: 100px;
     --on-color-bg: #22dd55;
     --off-color-bg: lightgray;
     --on-color-fg: dimgrey;
     --off-color-fg: var(--on-color-fg);
}
/** Main slider CSS **/
 .slider-checkbox {
     position: relative;
     width: 50%;
     margin: 0 auto 0.5rem auto;
}
 @media only screen and (max-width: 800px) {
     .slider-checkbox {
         flex-direction: row;
         width: 90%;
    }
}
 .slider-checkbox input {
     display: none;
}
 .slider-checkbox input:checked + label:after {
     left: calc(50% + calc(var(--width) / 2));
     background: var(--on-color-fg);
}
 .slider-checkbox input:checked + label:before {
     background: var(--on-color-bg);
}
 .slider-checkbox label {
     cursor: pointer;
}
 .slider-checkbox label:hover {
     color: #888;
}
 .slider-checkbox label:before, .slider-checkbox label:after {
     position: absolute;
     display: inline-block;
     content: "";
     left: calc(50% - var(--padding));
     border-radius: var(--radius);
}
 .slider-checkbox label:before {
     background: var(--off-color-bg);
     width: var(--width);
     z-index: 1;
     height: var(--height);
     transition: all 250ms;
}
 .slider-checkbox label:after {
     width: calc(var(--width) /2 - var(--padding) *2);
     background: var(--off-color-fg);
     z-index: 2;
     transition: all 200ms;
     height: calc(var(--height) - var(--padding) * 2);
     top: var(--padding);
     left: calc(50% + var(--padding));
}

</style>
<div class="slider-checkbox">
    <input id="option-1" type="radio" value="1" name="options">
    <label for="option-1">
        First option
    </label>
</div>
<div class="slider-checkbox">
    <input id="option-2" type="radio" value="1" name="options">
    <label for="option-2">
        Second option
    </label>
</div>
<div class="slider-checkbox">
    <input id="option-3" type="radio" value="1" name="options">
    <label for="option-3">
        Third option
    </label>
</div>
<a target='_blank' href='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Designer Diva, Jirgensons E, vamsi, wapmohin, azmir
advertisement 2