Simple CSS Button Border Hover Effect

In this post, I’ll walk you through how to create this CSS button border hover effect so you can use it in your web designs and Elementor.

This simple button is perfect for minimalist web designs that prioritize elegant and artistic aesthetics. For the font, I went with Antic Didone because the thin lines complement the width of the button border. Other fonts that would look nice include Prata, Italiana, and Nunito Sans.

25 Best Font Combinations for Elementor Websites

CSS Button Border Demo

See the Pen Border Button by Kate (@kate_hg123) on CodePen.

HTML Breakdown

For this button, I used the <a> element, 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">read more</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;
  height: 60px;
  width: 180px;
  background: transparent;
  border: 1px solid #141211;
  border-radius: 12px; /* 0px for square border, 12px for semi-round border, and 30px for round border */
  font-family: "Antic Didone", serif;
  font-size: 20px;
  color: #141211;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}

Next, let’s create the pseudo-element. In the normal state, the pseudo-element is the same size as the button, but the border-radius is slightly larger.

/* pseudo-element */
.custom-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #141211;
  border-radius: 18px; /* 0px for square border, 18px for semi-round border, and 36px for round border */
  transition: all 200ms ease-in-out;
  opacity: 0; /* Make the element invisible */
}

Now we need a hover state for the ::before pseudo element. On hover, the width and height of the button are increased by 12px on each side.

/* ::before button hover */
.custom-btn:hover:before {
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  opacity: 1; /* Make the element visible*/
}

Lastly, we need an active state to create a visual indication that the button was clicked. The button decreases in size by 5% when clicked.

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

How to add the CSS border 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.

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 #1B1B1B.
3. Make the background color transparent.
4. Set the border type to solid and make the border width 1px.
5. Change the border color to match the font color.
6. Set the border-radius to 30px. Use 12px for semi-rounded corners or 0px for squared corners.
7. Add padding to increase the size of your button. I used 16px for top and bottom and 32px for left and right.

Lastly, in the button widget advanced tab:

1. 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.

In the WP customizer navigate to ‘Additional CSS’

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

• Set the selector: .custom-btn {}.
• Inside the curly brackets set the following properties: display, justify-content, and align-items. We’ve already set most of the styling using the button widget; however, we need to set the display properties so the pseudo-element sits properly.

/* button in its normal state */ 
.custom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

2. Next, create the normal state for the ::before pseudo element

• Set the selector .custom-btn with ::before.
• Inside the curly brackets set the following properties: content, position, height, width, border, border-radius, opacity, transition, and z-index.

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

/* button before */
.custom-btn::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    border: 1px solid #1B1B1B;
    border-radius: 36px;
    opacity: 0;
    transition: all 300ms ease-in-out;
    z-index: -1;
}

3. Create the hover state for the ::before pseudo-element

• Set the selector .custom-btn with :hover::before.
• Inside the curly brackets set the following properties: opacity, height, and width.

/* button hover before */
.custom-btn:hover::before {
    opacity: 1;
    height: calc(100% + 12px);
    width: calc(100% + 12px);
}

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

• Set the selector .custom-btn with :active.
• Inside the curly brackets set the following property: transform.

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

Publish your changes.

Step 3: Checking for mobile responsiveness in Elementor

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

In the Elementor editor, adjust the 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 CSS for Button Border Hover Effect in Elementor

/* button in its normal state */ 
.custom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* button before */
.custom-btn::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    border: 1px solid #1B1B1B;
    border-radius: 36px; /* for rounded border */
    opacity: 0;
    transition: all 300ms ease-in-out;
    z-index: -1;
}

/* button hover before */
.custom-btn:hover::before {
    opacity: 1;
    height: calc(100% + 12px);
    width: calc(100% + 12px);
}

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

My buttons were inspired by this button.