Skip to content
Advertisements

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

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: