hover (CSS) 上的移动边框

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

You have to add only the :hover pseudo 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; }

 <a href="https://stackoverflow.com" id="start-here-btn" class="mmb-btn aalignright" href="/contact/"> GET STARTED </a>

Answer 3

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>