Html Code: Checkbox and Radio Button with Fade Effect

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.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<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;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Checkbox and Radio Button with Fade Effect

Links