Animated Border Hover Effect Buttons

Here’s how

can be implemented in HTML/WordPress/Bricks.

Step 1

Add this CSS in your child theme’s style.css or another appropriate location:

.btn-animated-border {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #111;
  text-transform: uppercase;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  background-color: transparent;
}

.btn-animated-border::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% - 12px);
  background: #fff;
  transition: 0.5s ease-in-out;
  transform: scaleY(1);
}

.btn-animated-border:hover::before {
  transform: scaleY(0);
}

.btn-animated-border:hover::after {
  transform: scaleX(0);
}

.btn-animated-border span {
  position: relative;
  z-index: 3;
}

.btn-animated-border::after {
  content: "";
  position: absolute;
  left: 6px;
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% - 12px);
  background: #fff;
  transition: 0.5s ease-in-out;
  transform: scalex(1);
}

Step 2

Add a Button element.

Wrap its text with span tags like this:

<span>I am a button</span>

Assign the element a class of btn-animated-border.

If using Bricks, this can be set at STYLE → CSS → CSS classes. You could also simply add it in the element classes input, but make sure you lock it as you don’t want to be accidentally adding/modifying any styles that may affect how these buttons behave.