JavaScript Animation Button

https://codepen.io/guldus/pen/OePRZa?editors=0100

---

Github:

---

HTML

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

---

CSS

body{
  background-color: #262626;
}
.button{
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.button_wall{
  position: relative;
  top: 20%;
  left: 20%;
  display: block;
  width: 250px;
  height: 130px;
  box-sizing: border-box;
  border-radius: 75px;
  background: url('https://image.winudf.com/v2/image/Y29tLmJlc3RoZC5tb3JuaW5nX3NjcmVlbl80X3Awb3Y0OTVw/screen-4.jpg?fakeurl=1&type=.jpg');
  background-size: cover;
  transition: 1s;
}
.button_circle{
  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("https://wallpaperplay.com/walls/full/0/7/6/29912.jpg");
  background-size: cover;
}
.text{
  color: #fff;
  position: absolute;
  top: 43.5%;
  transform: translateX(-50%);
  font-size: 50px;
}

---

JavaScript

$(".button_wall").click(function(){
  $(".button_wall").toggleClass("clicked");
});