How to Create Animated Button with Hover Effects Using HTML and CSS

Faraz

By Faraz - Last Updated:

Learn how to create animated buttons with hover effects using HTML and CSS. Follow this step-by-step tutorial to make your buttons more interactive and engaging.

Join us on Telegram
how to create animated button with hover effects using html and css.jpg
Read Alsosquid-game-loader.pngCSS Loaders: Creating Squid Game-Inspired Loaders Using HTML and CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

An animated button with hover effects is a button that changes its appearance or behavior when the user hovers their mouse cursor over it.

If you want to add some twist to your page, CSS-animated button with hover effects is perfect. This helps improve the visitor's stay. Animated buttons encourage visitors to see what your site has to offer and make your page more dynamic. Apply these CSS animated buttons with hover effects and you will surely impress your visitors.

Watch full tutorial on my YouTube Channel: Watch Here.

Let's start making an amazing animated button with hover effects Using HTML and pure CSS step by step.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our animated button with hover effects. Let's break down the HTML code step by step:

1. Document Type & Basic Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Button</title>
    <link rel="stylesheet" href="style.css">
</head>
  • <!DOCTYPE html> → Declares the document type as HTML5.
  • <html lang="en"> → Sets the language of the document to English.
  • <meta charset="UTF-8"> → Ensures support for special characters.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> → Ensures compatibility with Internet Explorer's latest rendering engine.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the page responsive on mobile devices.
  • <title>Animated Button</title> → Sets the title of the webpage.
  • <link rel="stylesheet" href="style.css"> → Links an external CSS file (style.css) to style the page.

2. Body Content: Buttons Inside a Container

<body>
    <div class="container">
        <a href="https://www.codewithfaraz.com" class="button" style="--color: #1e9bff">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            button 1
        </a>
        <a href="https://www.codewithfaraz.com" class="button" style="--color: #ff1867">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            button 2
        </a>
        <a href="https://www.codewithfaraz.com" class="button" style="--color: #6eff3e">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            button 3
        </a>
    </div>
</body>
</html>

Explanation of Elements:

  • <div class="container"> → A wrapper that holds all the buttons.
  • <a href="https://www.codewithfaraz.com" class="button" style="--color: #1e9bff"> → Each button is a clickable link styled with CSS.
    • The href attribute defines the link destination.
    • The class="button" applies styles from the CSS file.
    • The style="--color: #1e9bff" is a CSS variable used to define a unique color for each button.
  • <span></span> Elements:
    • There are four empty <span> elements inside each button.
    • These <span> elements are likely used in the CSS animation to create effects like borders, hover transitions, or background animations.

After creating the files, just paste the following codes into your file. Remember that you must save a file with the .html extension.

Read AlsoResponsive Gym Website Design Fitness Center Template.jpgResponsive Gym Website Design | Fitness Center Template

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our animated button with hover effects. Let's break it down step by step:

1. Resetting Default Styles

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  • * → This is a universal selector that applies styles to all elements.
  • margin: 0; → Removes default margins.
  • padding: 0; → Removes default padding.
  • box-sizing: border-box; → Ensures that width and height calculations include padding and borders.

2. Styling the Container

.container{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 120px;
    background: #27282c;
}
  • width: 100%; → Makes the container take up the full width.
  • min-height: 100vh; → Ensures it covers the full height of the viewport.
  • display: flex; → Uses Flexbox for layout.
  • justify-content: center; → Centers items horizontally.
  • align-items: center; → Centers items vertically.
  • flex-direction: column; → Arranges elements in a vertical column.
  • gap: 120px; → Adds space between buttons.
  • background: #27282c; → Sets the background color.

3. Styling the Buttons

.button{
    position: relative;
    padding: 15px 30px;
    font-size: 1.5rem;
    color: var(--color);
    border: 2px solid rgba(0,0,0,0.5);
    border-radius: 4px;
    text-shadow: 0 0 15px var(--color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    transition: 0.5s;
    z-index: 1;
}
  • position: relative; → Allows absolute positioning for child elements (span).
  • padding: 15px 30px; → Adds space inside the button.
  • font-size: 1.5rem; → Sets font size.
  • color: var(--color); → Uses a CSS variable for dynamic button color.
  • border: 2px solid rgba(0,0,0,0.5); → Adds a semi-transparent border.
  • border-radius: 4px; → Rounds the corners slightly.
  • text-shadow: 0 0 15px var(--color); → Creates a glowing text effect.
  • text-decoration: none; → Removes the underline.
  • text-transform: uppercase; → Converts text to uppercase.
  • letter-spacing: 0.1rem; → Adds spacing between letters.
  • transition: 0.5s; → Smooth animation on hover.
  • z-index: 1; → Ensures the button stays above other elements.

4. Button Hover Effect

.button:hover{
    color: #fff;
    border: 2px solid rgba(0,0,0,0);
    box-shadow: 0 0 0px var(--color);
}
  • color: #fff; → Changes the text color to white on hover.
  • border: 2px solid rgba(0,0,0,0); → Hides the border.
  • box-shadow: 0 0 0px var(--color); → Removes shadow effect.

5. Background Animation (Hover Effect)

.button::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color);
    z-index: -1;
    transform: scale(0);
    transition: 0.5s;
}

.button:hover::before{
    transform: scale(1);
    transition-delay: 0.5s;
    box-shadow: 0 0 10px var(--color),
    0 0 30px var(--color), 0 0 60px var(--color);
}
  • Before Hover:
    • content: ""; → Creates an empty pseudo-element.
    • position: absolute; → Places it over the button.
    • background: var(--color); → Uses the custom button color.
    • transform: scale(0); → Hides the background initially.
  • On Hover:
    • transform: scale(1); → Expands the background to full size.
    • box-shadow: 0 0 10px var(--color), 0 0 30px var(--color), 0 0 60px var(--color); → Creates a glowing effect.

6. Adding Moving Border Effects

.button span{
    position: absolute;
    background: var(--color);
    pointer-events: none;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--color),
    0 0 20px var(--color),
    0 0 30px var(--color),
    0 0 50px var(--color),
    0 0 100px var(--color);
    transition: 0.5s ease-in-out;
    transition-delay: 0.25s;
}
  • Each <span> creates an animated border effect.
  • pointer-events: none; → Prevents interaction.
  • box-shadow → Adds a glowing effect.
  • transition: 0.5s ease-in-out; → Smooth animation.

7. Hiding Spans on Hover

.button:hover span{
    opacity: 0;
    transition-delay: 0s;
}
  • Spans disappear when hovering over the button.

8. Positioning the Borders

.button span:nth-child(1),
.button span:nth-child(3){
    width: 40px;
    height: 4px;
}

.button span:nth-child(2),
.button span:nth-child(4){
    width: 4px;
    height: 40px;
}
  • Span 1 & 3 (Top & Bottom Borders): width: 40px; height: 4px;
  • Span 2 & 4 (Left & Right Borders): width: 4px; height: 40px;

9. Span Hover Animations

.button:hover span:nth-child(1){
    left: 50%;
}

.button:hover span:nth-child(3){
    right: 50%;
}

.button:hover span:nth-child(2){
    top: 50%;
}

.button:hover span:nth-child(4){
    bottom: 50%;
}
  • The spans move toward the center on hover.

10. Responsive Design for Large Screens

@media screen and (min-width: 992px) {
    .container{
        flex-direction: row;
    }
}
  • For screens larger than 992px, buttons are arranged in a row instead of a column.

This will give our animated button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 120px;
    background: #27282c;
}

.button{
    position: relative;
    padding: 15px 30px;
    font-size: 1.5rem;
    color: var(--color);
    border: 2px solid rgba(0,0,0,0.5);
    border-radius: 4px;
    text-shadow: 0 0 15px var(--color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    transition: 0.5s;
    z-index: 1;
}

.button:hover{
    color: #fff;
    border: 2px solid rgba(0,0,0,0);
    box-shadow: 0 0 0px var(--color);
}

.button::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color);
    z-index: -1;
    transform: scale(0);
    transition: 0.5s;
}

.button:hover::before{
    transform: scale(1);
    transition-delay: 0.5s;
    box-shadow: 0 0 10px var(--color),
    0 0 30px var(--color), 0 0 60px var(--color);

}

.button span{
    position: absolute;
    background: var(--color);
    pointer-events: none;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--color),
    0 0 20px var(--color),
    0 0 30px var(--color),
    0 0 50px var(--color),
    0 0 100px var(--color);
    transition: 0.5s ease-in-out;
    transition-delay: 0.25s;
}

.button:hover span{
    opacity: 0;
    transition-delay: 0s;
}

.button span:nth-child(1),
.button span:nth-child(3){
    width: 40px;
    height: 4px;
}

.button:hover span:nth-child(1),
.button:hover span:nth-child(3){
    transform: translateX(0);
}

.button span:nth-child(2),
.button span:nth-child(4){
    width: 4px;
    height: 40px;
}

.button span:nth-child(1){
    top: calc(50% - 2px);
    left: -50px;
    transform-origin: left;
}

.button:hover span:nth-child(1){
    left: 50%;
}

.button span:nth-child(3){
    top: calc(50% - 2px);
    right: -50px;
    transform-origin: right;
}

.button:hover span:nth-child(3){
    right: 50%;
}

.button span:nth-child(2){
    left: calc(50% - 2px);
    top: -50px;
    transform-origin: top;
}

.button:hover span:nth-child(2){
    top: 50%;
}

.button span:nth-child(4){
    left: calc(50% - 2px);
    bottom: -50px;
    transform-origin: bottom;
}

.button:hover span:nth-child(4){
    bottom: 50%;
}

@media screen and (min-width: 992px) {
    .container{
        flex-direction: row;
    }
}

Final Output:

how to create animated button with hover effects using html and css.gif
Read Alsocreate-real-time-crypto-price-tracker-with-html-css-and-javascript.webpCreate a Real-Time Crypto Price Tracker with HTML, CSS, and JS

Conclusion:

In conclusion, creating animated buttons with hover effects can make a significant difference in the user experience of your website or application. By following the step-by-step tutorial provided in this article, you can easily create buttons that are not only visually appealing but also interactive and engaging for users.

Remember to experiment with different styles and animations to find the perfect fit for your website or application. Additionally, keep in mind the importance of responsive design and accessibility when creating buttons.

We hope you found this tutorial helpful and informative.

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 😊

Tags: animated button, hover effects, html, css, creating buttons in html and css, creating hover effects for buttons, how to make buttons interactive, html and css button styling, css button animation
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺