Crafting a Stylish Animated Button with CSS
In the vast realm of web design, the smallest details can profoundly influence user experience. One such impactful element is a stylish and animated button. In this blog post, we'll guide you through creating a visually striking and animated button using HTML and CSS. Buckle up as we delve into each section with an added focus on utilizing a custom icon from Font Awesome.
The Idea
Our mission is to design a button that not only catches the eye but also incorporates a subtle animation for that extra touch. Let's dissect the key components we'll be utilizing:
- Background Color: We'll employ a vibrant color to make the button visually appealing.
- Text Color: A contrasting color for the button text to ensure readability.
- Padding: This adds space around the button text for a cleaner look.
- Border Radius: Rounded corners for a modern and inviting appearance.
- Font Awesome Icon: Using a custom icon from Font Awesome to enhance visual appeal.
- Shaking Animation: A subtle shake animation to draw attention.
The HTML Structure
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add to Cart Button</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
</head>
<body>
<button class="button single_add_to_cart_button">
<span class="text fadeInDown">Add to Cart</span>
</button>
</body>
</html>
The CSS Magic
cssbody {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.button.single_add_to_cart_button {
display: inline-block;
background-color: #3498db; /* Set your background color */
color: #fff; /* Set your text color */
border: none;
padding: 15px 25px; /* Adjust padding as needed */
border-radius: 50px;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
animation: shake 4s infinite;
}
.button.single_add_to_cart_button:before {
content: "\f217"; /* Custom icon from Font Awesome */
font-family: 'Font Awesome 5 Free'; /* Update with your actual font family */
font-weight: 900;
margin-right: 10px;
}
.text {
display: inline-block;
font-size: 1.2em;
vertical-align: middle;
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
}
.fadeInDown.text {
-webkit-animation-duration: 1s;
animation-duration: 0.5s;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
10%, 30%, 50%, 70%, 90% { transform: translate(-3px, 0px) rotate(-1deg); }
20%, 40%, 60%, 80% { transform: translate(3px, 2px) rotate(0deg); }
}
Explanation
- Background Color & Text Color: The button's visual appeal is heightened by carefully selecting a vibrant background color (blue in our case) and a contrasting text color (white).
- Padding: Adequate padding around the button text enhances the overall aesthetics by providing a balanced look.
- Border Radius: Rounded corners lend a modern touch to the button, making it more visually inviting.
- Font Awesome Icon: A custom icon from Font Awesome is incorporated before the button text, adding a unique and recognizable element.
- Shaking Animation: The subtle shake animation applied to the button creates a dynamic and attention-grabbing effect.
Feel free to experiment with these elements to tailor the button's appearance to your website's design theme and preferences. Enhancing user interaction can be as simple as incorporating an animated button with a touch of creativity. Happy coding!
