Welcome to CodingAyush.com in this post we will see how to animate a button using anime-js. This is the beginner frontend project with free source code This post is about of how to create a animated button using HTML, CSS, jQuery. In this article we will learn it step by step. Button animations are a great way to add a touch of interactivity and visual appeal to your website. With the help of HTML, CSS, jQuery, and the anime.js library, you can easily create stunning button animations that will make your website stand out. In this tutorial, we'll walk you through the steps to create a button animation project that you can use on your website. The source code for this project is available for free download on my website, CodingAyush.com.
Preview
Step 1: Create the HTML Markup
The first step is to create the HTML markup for the button animation. We'll create a simple button with the class "btn" and a span element inside the button with the class "text" to display the text for the button.
Step 2: Style the Button with CSS
The next step is to style the button using CSS. We'll add some basic styles to the button and the text inside it to make it look visually appealing.
Step 3: Add the jQuery Code
Now we'll add some jQuery code to the project. We'll use jQuery to listen for a click event on the button and then add or remove the "active" class from the button. We'll also use jQuery to animate the button using the anime.js library.
Step 4: Animate the Button with anime.js
Finally, we'll use the anime.js library to animate the button. We'll create two animations: one for when the button is clicked and one for when the mouse hovers over the button.
By following these four steps, you can create a visually stunning button animation project that will add interactivity to your website.
So here is the full code of the Animated Button using HTML, CSS, jQuery. You can also download the whole source code in .zip file scroll to bottom to get the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CodePen - Submit Button (Anime.js)</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<link
href="https://fonts.googleapis.com/css?family=Poppins:600"
rel="stylesheet"
/>
<main>
<div class="button">
<div class="text">Submit</div>
</div>
<div class="progress-bar"></div>
<svg
x="0px"
y="0px"
viewBox="0 0 25 30"
style="enable-background: new 0 0 25 30"
>
<path
class="check"
class="st0"
d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"
/>
</svg>
</main>
<!-- partial -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="./script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #11131e;
}
main {
height: 100vh;
width: 100vw;
}
.button {
background: #2b2d2f;
height: 80px;
width: 200px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
cursor: pointer;
border-radius: 4px;
}
.text {
font: bold 1.25rem/1 poppins;
color: #71dfbe;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: 0;
right: 0;
}
.progress-bar {
position: absolute;
height: 10px;
width: 0;
right: 0;
top: 50%;
left: 50%;
border-radius: 200px;
transform: translateY(-50%) translateX(-50%);
background: #505357;
}
svg {
width: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
right: 0;
}
.check {
fill: none;
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
var basicTimeline = anime.timeline({
autoplay: false
});
var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
var pathEl = pathEls[i];
var offset = anime.setDashoffset(pathEl);
pathEl.setAttribute("stroke-dashoffset", offset);
}
basicTimeline
.add({
targets: ".text",
duration: 1,
opacity: "0"
})
.add({
targets: ".button",
duration: 1300,
height: 10,
width: 300,
backgroundColor: "#2B2D2F",
border: "0",
borderRadius: 100
})
.add({
targets: ".progress-bar",
duration: 2000,
width: 300,
easing: "linear"
})
.add({
targets: ".button",
width: 0,
duration: 1
})
.add({
targets: ".progress-bar",
width: 80,
height: 80,
delay: 500,
duration: 750,
borderRadius: 80,
backgroundColor: "#71DFBE"
})
.add({
targets: pathEl,
strokeDashoffset: [offset, 0],
duration: 200,
easing: "easeInOutSine"
});
$(".button").click(function() {
basicTimeline.play();
});
$(".text").click(function() {
basicTimeline.play();
});