HTML CODE
<html>
<head>
<title> Check Box </title>
</head>
<body>
<div class="box">
<input type="Checkbox" name="" id="check">
<label for="check">
<span></span>
That's Great
</label>
</div>
</body>
</html>
CSS CODE
body{
padding: 0;
margin: 0;
background-color:#990000;
}
.box{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}
input[type="checkbox"]{
display:none
}
label{
position:relative;
color: #fff;
display: inline-block;
cursor:pointer;
font-size: 100px;
}
label span{
position:relative;
top:15px;
display:inline-block;
width:90px;
height:90px;
border: 5px solid #fff;
}
input[type="Checkbox"]:checked+label span:before{
content: "";
position:absolute;
top:10px;
left:10px;
bottom:10px;
right:10px;
background:#fff;
animation: ani 2s linear infinite;
}
@keyframes ani{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
TrueCodes 
Leave a comment