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.