Skip to content

JavaScript Animation Button



<div class="button">
  <div class="button_wall">
    <div class="button_circle"></div>


  background-color: #262626;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: relative;
  top: 20%;
  left: 20%;
  display: block;
  width: 250px;
  height: 130px;
  box-sizing: border-box;
  border-radius: 75px;
  background: url('');
  background-size: cover;
  transition: 1s;
  position: absolute;
  width: 50px;
  height: 130px;
  border-radius:  50% 0 0 50% ;
  background: rgb(0, 102, 34);
  box-shadow: inset 0px 0px 20px #262626;
  cursor: pointer;
  transition: 1s;
.clicked .button_circle {
  transition: 1s;
  margin-left: 200px;
  border-radius:  0 50% 50% 0;
  background: rgb(153, 0, 0);
.clicked.button_wall {
  transition: 1s;
  background: url("");
  background-size: cover;
  color: #fff;
  position: absolute;
  top: 43.5%;
  transform: translateX(-50%);
  font-size: 50px;



Leave a Reply

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

You are commenting using your 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: