Checkbox and Radio Button with Fade Effect

Written by @kerixa 4 April 2021

The following code includes some radio buttons and a checkbox that are designed with a special style in a blue theme. When selecting or deselecting any of these buttons, the changes are done gradually with a fade effect. The color of these radio buttons and checkboxes can be changed according to your taste and according to the theme of your website.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cormorant:300,400'>
<style>
@charset "UTF-8";

input[type=radio] {
    visibility: hidden;
    position: relative;
}

input[type=radio]:before {
    color: transparent;
    content: "";
    font-family: "Material Icons";
    font-size: 29px;
    top: -5px;
    left: -8px;
    position: absolute;
    transition: 0.5s ease-in;
    visibility: visible;
    z-index: 3;
}

input[type=radio]:after {
    background: #fff;
    border-radius: 50%;
    border: 2px solid #737373;
    color: transparent;
    content: "";
    font-family: "Material Icons";
    height: 20px;
    left: -6px;
    position: absolute;
    transition: 0.5s ease-in;
    top: -3px;
    width: 20px;
    visibility: visible;
    z-index: 1;
}

input[type=radio]:checked:after {
    border-color: transparent;
}

input[type=radio]:checked:before {
    color: #006580;
}

input[type=checkbox] {
    position: relative;
}

input[type=checkbox]:before {
    color: transparent;
    content: "";
    font-family: "Material Icons";
    font-size: 32px;
    top: -8px;
    left: -10px;
    position: absolute;
    transition: 0.5s ease-in;
    visibility: visible;
    z-index: 3;
}

input[type=checkbox]:after {
    background: #fff;
    border-radius: 2px;
    border: 2px solid #737373;
    color: transparent;
    content: "";
    font-family: "Material Icons";
    font-size: 18px;
    height: 20px;
    left: -6px;
    position: absolute;
    transition: 0.5s ease-in;
    top: -4px;
    width: 20px;
    visibility: visible;
    z-index: 1;
}

input[type=checkbox]:checked:after {
    border-color: transparent;
}

input[type=checkbox]:checked:before {
    color: #006580;
}

.container-input {
    height: 24px;
    padding: 8px;
}

.container-check,
.container-radio {
    float: left;
    height: 24px;
    width: 24px;
    margin-right: 8px;
}

body {
    background: #333;
    color: #4C4C4C;
    font-family: "helvetica";
}

label {
    line-height: 24px;
    vertical-align: middle;
    float: left;
}

.mid {
    margin: auto;
    text-align: center;
    width: 200px;
    border-radius: 2px;
    background: #E8E8E8;
}

.title {
    text-align: center;
    font-family: "Cormorant", serif;
    color: #0cbfef;
    font-weight: 300;
}
</style>
<form class="mid">
	<div class="radio">
		<div class="container-input">
			<div class="container-radio">
				<input type="radio" name="one" checked />
			</div>
			<label name="one">Check Me Out</label>
		</div>
		<div class="container-input">
			<div class="container-radio">
				<input type="radio" name="one" checked />
			</div>
			<label name="one">Check Me Out</label>
		</div>
	</div>
	<div class="checks">
		<div class="container-input">
			<div class="container-check"><input type="checkbox" name="two" id="two" checked /></div>
			<label name="two">Check Me Out</label>
		</div>
	</div>
</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