Marble Ball Animation for HTML Radio Buttons

Written by @kerixa 4 April 2021

This code displays several radio buttons that in addition to their beautiful style and the wooden design in the background of these radio buttons, have special effect on selection. The circle that is used to display the radio buttons selection is in three-dimensional and has glossy shape. Besides, when the radio button is selected a ball falls or goes up with an interesting effect.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Nunito&amp;display=swap'>
<style>
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    font-size: calc(32px + (40 - 32)*(100vw - 320px)/ (1024 - 320));
}

body {
    background-image: url("https://www.htmlbestcodes.com/files/light-wood.jpg");
    background-position: 50% 50%;
    color: #381803;
    display: flex;
    font: 1em Nunito, sans-serif;
    height: 100vh;
    line-height: 1.5;
}

form {
    margin: auto;
    max-width: 10em;
    padding: 1.5em 0;
    position: relative;
}

form label:before, form span:before {
    border-radius: 50%;
    content: "";
}

form label {
    cursor: pointer;
    display: flex;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

form label:before {
    background: radial-gradient(100% 100% at 33% 33%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 50%), radial-gradient(100% 100% at 67% 67%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%);
    box-shadow: 0 0 0.75em #000 inset;
    display: inline-block;
    margin-right: 0.375em;
    width: 1.5em;
    height: 1.5em;
}

form label:not(:last-of-type) {
    margin-bottom: 1.5em;
}

form span {
    position: absolute;
    top: 1.75em;
    left: 0.25em;
    width: 1em;
    height: 1em;
    transition: transform 0.25s linear;
    z-index: 1;
}

form span, form span:before {
    display: block;
}

form span:before {
    background-color: #2762f3;
    background-image: radial-gradient(10% 10% at 50% 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)), radial-gradient(12% 12% at 60% 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)), radial-gradient(100% 100% at 60% 50%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.25) 50%);
    border-radius: 50%;
    box-shadow: 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.5), 0 0 0.1em 0.1em rgba(0, 0, 0, 0.25) inset;
    width: 100%;
    height: 100%;
}

input {
    position: fixed;
    top: -1.5em;
    left: -1.5em;
}

input:nth-of-type(1):checked ~ span {
    transform: translateY(0em);
}

input:nth-of-type(1):checked ~ span:before {
    animation: wobble1 0.5s linear forwards;
}

@keyframes wobble1 {
from, to {
    transform: translateY(0) scale(1);
}

25% {
    transform: translateY(0) scale(1.33);
}

50% {
    transform: translateY(0.25em) scale(1);
}

67% {
    transform: translateY(-0.15em) scale(1);
}

83% {
    transform: translateY(0.07em) scale(1);
}
}

input:nth-of-type(2):checked ~ span {
    transform: translateY(3em);
}

input:nth-of-type(2):checked ~ span:before {
    animation: wobble2 0.5s linear forwards;
}

@keyframes wobble2 {
from, to {
    transform: translateY(0) scale(1);
}

25% {
    transform: translateY(0) scale(1.33);
}

50% {
    transform: translateY(0.25em) scale(1);
}

67% {
    transform: translateY(-0.15em) scale(1);
}

83% {
    transform: translateY(0.07em) scale(1);
}
}

input:nth-of-type(3):checked ~ span {
    transform: translateY(6em);
}

input:nth-of-type(3):checked ~ span:before {
    animation: wobble3 0.5s linear forwards;
}

@keyframes wobble3 {
from, to {
    transform: translateY(0) scale(1);
}

25% {
    transform: translateY(0) scale(1.33);
}

50% {
    transform: translateY(0.25em) scale(1);
}

67% {
    transform: translateY(-0.15em) scale(1);
}

83% {
    transform: translateY(0.07em) scale(1);
}
}

input:nth-of-type(4):checked ~ span {
    transform: translateY(9em);
}

input:nth-of-type(4):checked ~ span:before {
    animation: wobble4 0.5s linear forwards;
}

@keyframes wobble4 {
from, to {
    transform: translateY(0) scale(1);
}

25% {
    transform: translateY(0) scale(1.33);
}

50% {
    transform: translateY(0.25em) scale(1);
}

67% {
    transform: translateY(-0.15em) scale(1);
}

83% {
    transform: translateY(0.07em) scale(1);
}
}
/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
    body {
        background-image: url("https://www.htmlbestcodes.com/files/dark-wood.jpg");
        color: #c58b50;
    }
}
</style>
<form>
	<input id="one" type="radio" name="radios" value="one">
	<input id="two" type="radio" name="radios" value="two">
	<input id="three" type="radio" name="radios" value="three">
	<input id="four" type="radio" name="radios" value="four">
	<span></span>
	<label for="one">One</label>
	<label for="two">Two</label>
	<label for="three">Three</label>
	<label for="four">Four</label>
</form><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best 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