Skip to content

CSS CHECKBOX-5


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);
    }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: