Moving border on hover (CSS) - html

Question

I love the buttons on this site - https://veronicaromney.com/
I tried copying the CSS from the site but I am not making it work right.
I do use Elementor, I added the code to the theme (for the button) and then the ID to the button, but what I got is that the button block (entire block) got the CSS and did nothing on hover.
Can you help me build these buttons?
Here is the code I have so far that pretty much isn't working for me.
.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}

Answer 1

.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn:hover:before, .mmb-btn:hover:after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
<a id="start-here-btn" class="mmb-btn alignright" href="/contact/"> GET STARTED </a>
You were missing .mmb-btn:hover:before, .mmb-btn:hover:after.

Answer 2

A quickie because why not. I suggest using transform instead of changing the position as it's more dom fluid and semantically cleaner.
Also remember to apply pointer-events: none to the pseudo element so you don't get the spazzy behavior when someone hovers the border outside of the button like you see on the other answers provided.
.fancy-btn {
padding: .5rem 1.5rem;
background-color: #eee;
position: relative;
transition: background-color .5s ease;
}
.fancy-btn:after {
content: '';
display: block;
pointer-events: none;
border: red 1px solid;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: translate(1rem,1rem);
transition: transform .25s ease;
}
.fancy-btn:hover {
background-color: yellow;
}
.fancy-btn:hover:after {
top: 0;
left: 0;
border-color: green;
transform: translate(0,0);
}
body {
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
<a class="fancy-btn">HEY I AM A BUTTON, YAY</a>

Answer 3

You have to add only the :hoverpseudo class.
.mmb-btn:hover::before, .mmb-btn:hover::after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn:hover::before, .mmb-btn:hover::after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
GET STARTED