Creating interactive elements on your website can significantly enhance user experience and engagement. One such element is an animated button that responds to user interactions with smooth transitions and appealing effects. In this article, we’ll show you how to create a stunning animated button using HTML, CSS, and jQuery.
Why Animated Buttons Matter
Animated buttons are not just about aesthetics; they also improve user experience by providing visual feedback. This feedback can guide users through actions, making navigation more intuitive and enjoyable. An engaging button can also encourage clicks, improving conversion rates on your site.
Getting Started
To begin, you’ll need a basic understanding of HTML, CSS, and jQuery. If you’re new to any of these technologies, don’t worry. This tutorial is designed to be easy to follow, and you’ll learn a lot along the way.
HTML Structure
The HTML part is straightforward. We will create a button element with a class to style and animate it.
CSS Styling
CSS will handle the styling and animations. We’ll define the button’s appearance, including its size, color, border, and text properties. Additionally, we’ll use CSS animations to create the visual effects that make the button stand out.
jQuery for Interactivity
jQuery will be used to add interactivity to our button. With just a few lines of jQuery, we can make the button respond to clicks and change its appearance dynamically.
Step-by-Step Tutorial
Step 1: Create the HTML Structure
First, you need to set up the basic HTML structure for your button. This involves creating a simple button element within your HTML file.
Step 2: Add CSS for Styling and Animation
Next, you’ll add CSS to style your button. This includes defining its size, colors, and other visual properties. You’ll also add keyframes for the animation, which will control how the button changes when clicked.
Step 3: Implement jQuery for Button Interaction
Finally, you’ll use jQuery to add the interactive functionality to your button. This will include code to handle the click events and trigger the animations.
Copy the Code
You can copy the complete code for the animated button below to use in your projects. Simply paste it into your HTML, CSS, and JavaScript files, and you’ll have a stunning animated button ready to go.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Animation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* Global Styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100vh;
width: 100vw;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Open Sans', sans-serif;
}
/* Button */
.btn {
background: transparent;
width: 200px;
position: relative;
padding: 15px;
color: #1ECD97;
cursor: pointer;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
border-radius: 4px;
font-weight: 600;
overflow: hidden;
border: 2px solid #1ECD97;
text-decoration: none;
}
/* In Progress Button */
.btn-progress {
width: 500px;
color: transparent;
}
.btn-fill:after {
content: '';
background: #1ECD97;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0;
display: block;
animation: fill 3.2s linear forwards;
}
/* Button Complete */
.btn-complete {
padding: 10px;
width: 50px;
color: #fff;
pointer-events: none;
}
.btn-complete:after {
font-family: 'FontAwesome';
content: "\f00c";
color: #fff;
height: 100%;
padding-left: 3px;
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: #1ECD97;
}
/* Animation */
@keyframes fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
</style>
</head>
<body>
<a href="#" class='btn'>Submit</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
var btn = $(".btn");
btn.on("click", function() {
$(this).addClass('btn-progress');
setTimeout(function() {
btn.addClass('btn-fill');
}, 500);
setTimeout(function() {
btn.removeClass('btn-fill');
}, 4100);
setTimeout(function() {
btn.addClass('btn-complete');
}, 4100);
});
});
</script>
</body>
</html>