HG WEB STUDIO

CSS Button Hover Animation Tutorial: Aura Effect [2024]

Featured image - CSS Button Hover - Elementor button before and after in normal state and active state

Learn how to create engaging call-to-actions with CSS button hover animations.

The border aura effect is achieved through a combination of the button’s hover state and the use of the ‘after’ pseudo-element with transitions, transformations, and opacity changes.

In this post I will walk you through the steps of creating this button with CSS, and how to add it to your Elementor website.

Button Demo

Hover + Click to view effect.

Note: CSS button hover effects do not work on mobile.

HOVER ME!

HTML Breakdown

For our button, we can use the <button> element or the <a> element. Each element has different use cases.

Use Cases:

  • Use the button element when: You need a clickable element to trigger an action, like submitting a form, triggering JavaScript functions, or performing any action within the webpage.
  • Use the anchor element when: You need to create hyperlinks for navigation, whether it’s within the same webpage or linking to external resources.

To sum it up, choose the button element when you need an interactive element to trigger an action, and use the anchor when you need to create hyperlinks for navigation.

HTML Code using <a>

<a href="#" class="btn-demo" role="link">BUTTON</a>

To create a link visually styled as a button, we need to have the following attributes: href, class, and role.

  • href: Defines the destination link. Replace the ‘#’ with your link or anchor.
  • class: Defines the selector to target for styling.
  • role: Defines the purpose of the element for accessibility technologies like screen readers.

Learn more about links here.

HTML Code using <button>

<button class="btn-demo" type="button">BUTTON</button>

To create a button, we need to have the following attributes: class and type.

  • class: Defines the selector to target for styling.
  • type: Defines the type of button and its intended action. There are three types: button, submit, and reset.

Learn more about buttons here.

CSS Breakdown

To style our button, we need to target the element with the class selector we chose in the HTML. I’m using ‘.btn-demo’.

First, let’s create its normal state:

/* button in its normal state */
.btn-demo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 56px; 
    width: 190px; 
    background: #111; 
    color: #fff; 
    font-family: sans-serif; 
    font-size: 18px; 
    letter-spacing: 1px;
    border: none;
    transition: all 300ms;
}
Button hover demonstration with no hover effects

Next, let’s create its hover state:

/* button in its hover state */
.btn-demo:hover {
  background: transparent;
  color: #111;
}
Button hover demonstration with hover effects

Now we need to create an ::after pseudo element:

/* button after */
.btn-demo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: solid 3px #111;
  opacity: 0; /* Opacity set to 0 so it is invisible in normal state */
  transform: scaleX(1.1) scaleY(1.3);
  transition: all 500ms;
}

Now we need a hover state for the ::after pseudo element:

/* button hover after */
.btn-demo:hover::after {
  opacity: 1; /* Opacity set to 1 so it is visible in hover state*/
  transform: scale(1);
}
Button hover demonstration with hover effects and active pseudo element transition

Lastly, we need an active state to create a visual indication that the button was clicked:

/* button active state */
.btn-demo:active {
  transform: scale(.9);
}
Button hover demonstration for active state. The button shrinks when pressed.

How to add the button hover animation in Elementor

To create this button in Elementor, I’m using the button widget instead of writing my own HTML code. We can write less lines of custom CSS by using some of the style settings available in the widget.

Step 1: Add the button widget to your canvas and give it some basic styling

Demonstration of Elementor button widget dragging into canvas.

In the button widget content tab:

  1. Change the CTA text
  2. Add the button link

In the button widget style tab:

  1. Set the alignment to justified so the button takes up the full width of the container.
  2. Change the typography to match your website (font family, font size, weight, etc.).
  3. Choose the text color and the text hover color. I’m using #ffffff (white) and #111111 (black).
  4. Pick your background color and background hover color. I’m using #111111 (black) and #ffffff (white).
  5. Set the border-radius to 0 if you want sharp corners.
  6. Add padding to increase the size of your button.

In the button widget advanced tab:

  1. Change the width from default to custom.
  2. Set the width of your button and the placement. I used 14% width and align-self to center to match my page styling.
  3. In the CSS classes box, type in your class selector. I used ‘btn-demo’.

Now let’s write our code.

Step 2: Write the custom CSS in the WordPress customizer

You can also use the custom CSS area in the advanced tab of the button widget. I prefer keeping all my custom code in one place for better management.

Demonstration of navigating to customizer in WordPress.

In WP customizer navigate to ‘Additional CSS’

1. Create the normal state (how it looks on the page without any user interaction)

  • Set the selector: .btn-demo {}.
  • Inside the curly brackets set the following properties: position and transition.
/* button in its normal state */ 
.btn-demo {
    position: relative;
    transition: all 300ms;
}

2. Create normal state for the ::after pseudo element

  • Set the selector .btn-demo with ::after.
  • Inside the curly brackets set the following properties: content, position, top, left, width, height, background, border, opacity, transform, and transition.

Note: The border color should be the same as the background color you chose in step 1.

/* button after */
.btn-demo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: solid 3px #111;
  opacity: 0;
  transform: scaleX(1.1) scaleY(1.3);
  transition: all 500ms;
}

3. Create the hover state for the ::after pseudo element

  • Set the selector .btn-demo with :hover::after.
  • Inside the curly brackets set the following properties: opacity and transform.
/* button hover after */
.btn-demo:hover::after {
  opacity: 1;
  transform: scale(1);
}

4. Create active state (how the button looks on the page when a user clicks on it)

  • Set the selector .btn-demo with :active.
  • Inside the curly brackets set the following property: scale.
/* button active state */
.btn-demo:active {
  transform: scale(.9);
}

Publish your changes.

Additional CSS demonstration in WordPress customizer. Showing button active state and clicking 'publish'.

Step 3: Checking for mobile responsiveness in Elementor

Lastly, we need to check our code for mobile responsiveness.

Demonstrating how to use the mobile responsive settings in Elementor. Clicking on the mobile button and increasing the button width.

In the Elementor editor, adjust the width of your button for tablet and mobile view using Elementor’s responsive settings.

Reminder: hover effects don’t work on mobile.

Final Thoughts

Feel free to use my code as is, or play around with the different properties to create a button that fits your website aesthetic. Experiment with the colors, adjust the transition speeds, and make it yours!

The beauty of CSS lies in its flexibility, allowing you to level-up your website templates to fit your brand identity.

Remember, if you encounter any challenges or have questions along the way, feel free to drop them in the comments below. I’d love to see your work, and I’m here to help!

Full CSS for Button Hover Animation in Elementor

/* button in its normal state */ 
.btn-demo {
    position: relative;
    transition: all 300ms;
}

/* button after */
.btn-demo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: solid 3px #111;
  opacity: 0;
  transform: scaleX(1.1) scaleY(1.3);
  transition: all 500ms;
}

/* button hover after */
.btn-demo:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* button active state */
.btn-demo:active {
  transform: scale(.9);
}

My button was inspired by this button.

Leave a Reply

Your email address will not be published. Required fields are marked *

more posts

Learn how to add a CSS button hover animation on your website to create an engaging call to action. Use with WordPress and Elementor.