3D Pushing Radio Button

Written by @kerixa 9 March 2021

When we want our users to be able to choose one of several items, we must use the radio buttons. However, to beautify the appearance of the site, you should use radio buttons with a special style, such as the following code, which provides 3D radio buttons like the buttons of a recording device. By selecting each button, it seems that the button has been pushed and gone inward.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
* {
     border: 0;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 :root {
     --bg: #e3e4e8;
     --fg: #17181c;
     --bs1: #ffffff;
     --bs2: #f3f4f8;
     --bs3: #cccdd1;
     --bs4: #c1c2c5;
     --transDur: 0.1s;
     font-size: calc(20px + (40 - 20)*(100vw - 320px)/(2560 - 320));
}
 body, form {
     display: flex;
}
 body, input {
     color: var(--fg);
     font: 1em/1.5 Muli, sans-serif;
}
 body {
     background-color: var(--bg);
     height: 100vh;
}
 form, label {
     width: 100%;
}
 form {
     margin: auto;
     max-width: 24em;
     padding: 0 1.5em;
}
 label {
     display: block;
     margin: 0 0.2em;
     text-align: center;
     -webkit-tap-highlight-color: transparent;
}
 label:first-child input {
     border-radius: 0.5em 0 0 0.5em;
}
 label:last-child input {
     border-radius: 0 0.5em 0.5em 0;
}
 input {
     border-radius: 0;
     box-shadow: 0.15em 0.15em 1em var(--bs2) inset, -0.15em -0.15em 1em var(--bs3) inset, 0.15em 0.15em 0.45em var(--bs4), -0.15em -0.15em 0.45em var(--bs1);
     cursor: pointer;
     display: block;
     margin-bottom: 0.5em;
     width: 100%;
     height: 1em;
     transition: all var(--transDur) ease-in-out;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}
 input:checked {
     box-shadow: -0.15em -0.15em 0.45em var(--bs2) inset, 0.15em 0.15em 0.45em var(--bs4) inset, 0 0 0 var(--bs4), 0 0 0 var(--bs1);
}
 input:checked + span {
     opacity: 1;
}
 input:focus {
     outline: transparent;
}
 input + span {
     opacity: 0.65;
     transition: opacity var(--transDur) ease-in-out;
}
/* Dark mode */
 @media (prefers-color-scheme: dark) {
     :root {
         --bg: #454954;
         --fg: #e3e4e8;
         --bs1: #5a5f6d;
         --bs2: #4a4e5a;
         --bs3: #3e424c;
         --bs4: #30333b;
    }
}
</style>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Muli&amp;display=swap'>
<form>
	<label><input type="radio" name="band" value="am" checked><span>AM</span></label>
	<label><input type="radio" name="band" value="fm"><span>FM</span></label>
	<label><input type="radio" name="band" value="sw"><span>SW</span></label>
	<label><input type="radio" name="band" value="mw"><span>MW</span></label>
	<label><input type="radio" name="band" value="mw"><span>LW</span></label>
</form>
<a target='_blank' href='https://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!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300