Learn to create a stunning animated button with hover effects using HTML and CSS. Follow our beginner-friendly tutorial for a captivating website design.
Table of Contents
Animated buttons with hover effects are a great way to enhance user interaction on your website. In this tutorial, we will walk you through creating an eye-catching button using HTML and CSS. Whether you're a novice or an experienced developer, you'll find this guide invaluable for adding that extra touch of interactivity to your web pages.
Prerequisites
Before we dive into the tutorial, make sure you have a basic understanding of HTML and CSS. This tutorial is beginner-friendly, but having some prior knowledge will be beneficial.
Source Code
Step 1 (HTML Code):
Let's start by setting up the HTML structure for our button. Create a new HTML file and define a button element within the body section. Assign a class for easy styling in CSS.
Let's break the code step by step:
1. <!DOCTYPE html>: This is the document type declaration, and it indicates that the document is an HTML5 document.
2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute is set to "en," indicating that the content is in English.
3. <head>: This section contains meta-information about the document and links to external resources.
- <meta charset="UTF-8">: This specifies the character encoding of the document as UTF-8, which is a widely used character encoding for web content.
- <title>Animated Button</title>: Sets the title of the web page to "Animated Button." This title is typically displayed in the browser's title bar or tab.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is often used for responsive web design. It sets the initial viewport width to the width of the device and the initial zoom level to 1.0.
- <link rel="preconnect" href="https://fonts.googleapis.com"> and <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>: These tags are used to preconnect to external domains (Google Fonts in this case) to reduce latency when fetching resources from those domains.
- <link href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" rel="stylesheet" type='text/css'>: This is a link to an external stylesheet from Google Fonts. It's used to import the "Mulish" font family for use in the web page.
- <link rel="stylesheet" href="styles.css">: This links to an external CSS stylesheet named "styles.css," which is used to style the HTML content. It's often common practice to separate HTML structure from styling using CSS.
4. <body>: This is the main content area of the web page.
5. <span class="background">: A <span> element with the class "background" is used as a container for the content.
6. <a href="#" class='button'>: This is a hyperlink (<a>) with the class "button." It appears to be a button-like element.
7. <svg>: This is an SVG (Scalable Vector Graphics) element used for vector graphics. In this case, it appears to be defining a rectangle inside the button.
- <rect x="0" y="0" fill="none" width="100%" height="100%">: This <rect> element defines a rectangle starting at the top-left corner (0,0) with a width and height of 100%. The fill attribute is set to "none," meaning the rectangle is not filled with any color.
- "Learn": This text is placed inside the anchor element and will be displayed as the content of the button.
Step 2 (CSS Code):
Now comes the fun part—styling your button to make it visually appealing and interactive. CSS is your go-to tool for this purpose.
Let me break down each part of the code for you:
1. :root:
- This is a pseudo-class that represents the highest-level parent element in an HTML document, which is typically the <html> element.
- Inside :root, a CSS variable --background is defined and set to the color #2C2C2C.
2. *:
- This is a universal selector, which targets all elements in the document.
- It sets the margin and padding of all elements to 0 and specifies that the box-sizing property should be set to border-box. This ensures that the elements' width and height are calculated including their borders and padding.
3. html:
- This rule targets the <html> element in the document.
- It sets the font family to 'Mulish' and the base font size to 16 pixels.
4. .background:
- This rule targets elements with the class name "background."
- It sets the background color to the value of the --background variable, which was defined in the :root earlier.
- It uses the CSS Grid layout to center the content both horizontally and vertically in the container.
- The container's height is set to 100% of the viewport height (100vh).
5. .button:
- This rule targets elements with the class name "button."
- It sets various styles for buttons, such as color, cursor, font size, line height, and more. These styles create a visually appealing button.
- It sets a white color for the text, and the text color changes to #FF9950 when the button is hovered over.
- The button text is displayed in uppercase.
- The button has an SVG icon inside it, which is styled further in the subsequent rules.
6. .button svg:
- This rule targets the SVG element inside elements with the class "button."
- It sets the height and width of the SVG to 40 pixels and makes it fill the entire button.
- The SVG is absolutely positioned at the top-left corner of the button.
7. .button rect:
- This rule targets the <rect> element inside the SVG within elements with the class "button."
- It sets various properties for the rectangle, including stroke color, stroke width, and stroke-dasharray.
- The stroke-dasharray property defines a pattern for the stroke, and it starts with a dash of 450 units followed by a gap of 0 units.
- When the button is hovered over, these properties change, resulting in an animation effect.
8. .button:hover rect:
- This rule specifies the styles for the <rect> element when the button is hovered over.
- It increases the stroke width and modifies the stroke-dasharray and stroke-dashoffset properties, creating a dash animation.
- The stroke color changes to #FF9950, and a cubic-bezier easing function is applied to control the animation timing.
:root {
--background: #2C2C2C;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Mulish';
font-size: 16px;
}
.background {
background-color: var(--background);
display: grid;
place-items: center;
height: 100vh;
}
.button {
color: #fff;
cursor: pointer;
font-size: 1rem;
line-height: 2.5rem;
max-width: 160px;
width: 100%;
letter-spacing: 0.3rem;
font-weight: 600;
position: relative;
text-decoration: none;
text-transform: uppercase;
display: flex;
justify-content: center;
transition: all 1s ease-in;
}
.button:hover {
color: #FF9950;
}
.button svg {
height: 40px;
left: 0;
top: 0;
position: absolute;
width: 100%;
}
.button rect {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 450, 0;
transition: all 0.5s linear;
}
.button:hover rect {
stroke-width: 5;
stroke-dasharray: 20, 300;
stroke-dashoffset: 48;
stroke: #FF9950;
transition: all 2s cubic-bezier(0.22, 1, 0.25, 1);
} Final Output:
Conclusion:
Creating an animated button with a hover effect is an excellent way to add interactivity and engagement to your website. With HTML and CSS, you have the power to craft unique and captivating buttons that leave a lasting impression on your audience. Start implementing these techniques on your website today and watch your user engagement soar. Happy coding!
Code by: Atherosai
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
