HG WEB STUDIO

Filed in: ,

Sliding Button Hover CSS Effect

Updated on: June 14, 2024

Table of Contents

In this post, I’ll walk you through how to create a minimalist button with a sliding hover effect so you can easily add it to your web designs and Elementor.

This button is perfect for minimal and modern web designs that prioritize simple and clean aesthetics. I used Roboto, a Google font included in the Elementor plugin. Some other fonts that would work well with this button include Open Sans, Oxygen, and Source Sans Pro.

25 Best Font Combinations for Elementor Websites svg of arrow pointing right

CSS Sliding Button Demo

See the Pen minimal button by Kate (@kate_hg123) on CodePen.

HTML Breakdown

I used the <a> element for this button, but you can swap it out for the <button> element. Each of these elements 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 an 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 pages.

HTML Code using the anchor element

<a href="#" class="custom-btn" role="link">Click Me</a>

To create a link that is 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 at W3Schools.

HTML Code using the button element

<button id="my-btn" class="custom-btn" type="button">Submit</button>

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

  • class: Defines the selector to target for styling.
  • id: Defines the selector to target for JavaScript functions or other element-specific styling and actions. Ids are more specific than classes and should only be used once, whereas classes can be used for multiple elements.
  • type: Defines the type of button and its intended action. There are three types: button, submit, and reset.

Learn more about buttons at W3Schools.

CSS Breakdown

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

First, let’s create its normal state.

/* button in its normal state */
.custom-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ecebe9;
  width: 180px;
  height: 56px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 2px;
  color: #141211;
  text-decoration: none;
  transition: all 300ms ease-in-out;
  z-index: 1; 
}

Next, let’s create the before and after pseudo elements. The before element creates the background reveal during the hover effect, and the after element is the underline that appears during the hover effect.

/* before and after */
.custom-btn::before,
.custom-btn::after {
  content:'';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  transition: all 300ms ease-in-out;
}

.custom-btn::before {
  top: 0;
  background-color: #fefefe;
  z-index: -1;
}

.custom-btn::after {
  width: 0%;
  height: 1px;
  background-color: #141211;
}

Lastly, we need to create the hover states for the pseudo elements. The before element starts in the middle then slides to the left and right, revealing the background. The after element creates an underline that starts in the middle and is 30% of the width of the button.

To get the line to remain in the middle, we set the left and right stops at 35% (35% left stop + 35% right stop + 30% width = 100%). If you wanted the line to be 50% of the width of the button, you’d set the left and right stops at 25%.

/* button hover states */
.custom-btn:hover::before {
  left: 0;
  right: 0;
}

.custom-btn:hover::after {
  left: 35%;
  right: 35%;
  bottom: 0;
  width: 30%;
}

How to add the Sliding button in Elementor

Demo of sliding button in Elementor

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

For this example, I’ve adjusted some of the properties to fit the styling of the web design, like the padding, background color, and font.

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

Navigate to the button widget content tab:

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

Then, in the button widget style tab:

  1. Change the typography to match your website (font family, font size, weight, etc.).
  2. Choose the text color. I’m using #495338.
  3. Change the background color to #fefefe.
  4. Set the border type to none.
  5. Set the border-radius to 0px.
  6. Add padding to increase the size of your button. I used 20px for top and bottom and 40px for left and right.

Lastly, in the button widget advanced tab:

  1. Change the align self property to start, center, or end. I’m using center.
  2. In the CSS classes box, type in your class selector. I used ‘custom-btn’.

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.

Sliding button CSS code in WP customizer

In the WP customizer navigate to ‘Additional CSS’

1. Create the normal state (how it looks on the page without any user interaction). All of the styling for the button is done through the button widget, so we just need to add a transition property. We also need to target the button text with the class .elementor-button-text to keep it forward during the hover effect.

/* button in its normal state */ 
.custom-btn {
  transition: all 300ms ease-in-out;
}

/* Keeps text forward on hover */ 
.custom-btn.elementor-button-text {
    z-index: 1;
    transition: color 300ms ease-in-out;
}

2. Next, create the pseudo-elements in their normal state. The only difference here (from the codepen example) is we removed the z-index property in the ::before element and moved it to the .elementor-button-text class.

/* button pseudo-elements */
.custom-btn::before,
.custom-btn::after {
  content:'';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  transition: all 300ms ease-in-out;
}

.custom-btn::before {
  top: 0;
  background-color: #495338;
}

.custom-btn::after {
  width: 0%;
  height: 1px;
  background-color: #fefefe;
}

3. Lastly, we need to create the hover states.

/* button hover states */
.custom-btn:hover .elementor-button-text {
    color: #fefefe;
}

.custom-btn:hover::before {
  left: 0;
  right: 0;
}

.custom-btn:hover::after {
  left: 35%;
  right: 35%;
  bottom: 0;
  width: 30%;
}

Publish your changes.

Step 3: Checking for mobile responsiveness in Elementor

Image of mobile device with website in responsive mode

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

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

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 and font, and make it yours!

Remember, if you experience any issues 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 Code for Sliding Button with CSS Effects in Elementor

/* button in its normal state */ 
.custom-btn {
  transition: all 300ms ease-in-out;
}

/* Keeps text forward on hover */ 
.custom-btn .elementor-button-text {
    z-index: 1;
    transition: color 300ms ease-in-out;
}

/* button pseudo-elements */
.custom-btn::before,
.custom-btn::after {
  content:'';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  transition: all 300ms ease-in-out;
}

.custom-btn::before {
  top: 0;
  background-color: #495338;
}

.custom-btn::after {
  width: 0%;
  height: 1px;
  background-color: #fefefe;
}

/* button hover states */
.custom-btn:hover .elementor-button-text {
    color: #fefefe;
}

.custom-btn:hover::before {
  left: 0;
  right: 0;
}

.custom-btn:hover::after {
  left: 35%;
  right: 35%;
  bottom: 0;
  width: 30%;
}

Button inspiration found here.

Table of Contents

Search

Browse by Category

Leave a Reply

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