It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 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.
<!-- this script is provided by http://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='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!