Skip to content

CSS Animation – Button


HTML CODE

<div class="check">
  <input type="checkbox">
</div>

CSS CODE

body{
  padding:0;
  margin:0;
  background-color:#0d0d0d;
}
.check{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
input[type="checkbox"]{
  -webkit-appearance:none;
  width: 300px;
  height:180px;
  background-color:#262626;
  border-radius:200px;
  border:5px solid #333333;
  outline: none;
  transition: .5s;
}
input:checked[type="checkbox"]{
  background-color:#993d00;
  border: 5px solid #662900;
}
input[type="checkbox"]:before{
  content:"";
  position:absolute;
  top:8px;
  left:10px;
  border-radius:50%;
  width:170px;
  height:170px;
  background-color:#000;
  transition: .5s;
}
input:checked[type="checkbox"]:before{
  left:130px
}
input[type="checkbox"]:after{
  content:"";
  position:absolute;
  top:75px;
  left:75px;
  border-radius:50%;
  width:20px;
  height:20px;
  border:5px solid white;
  transition: .5s;
}
input:checked[type="checkbox"]:after{
  left:215px;
  width:0;
  border-radius:0;
}

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: