Me encantan los botones de este sitio - https://veronicaromney.com/
Intenté copiar el CSS del sitio, pero no logro que funcione correctamente.
Sí uso Elementor, agregué el código al tema (para el botón) y luego la ID al botón, pero lo que obtuve es que el bloque del botón (el bloque completo) obtuvo el CSS y no hizo nada al pasar el mouse sobre él.
¿Puedes ayudarme a construir estos botones?
Aquí está el código que tengo hasta ahora que prácticamente no funciona para mí.
.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 { -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> Te faltaba .mmb-btn:hover:before, .mmb-btn:hover:after .
Un rapidito porque porque no. Sugiero usar transform en lugar de cambiar la posición, ya que es más fluido y semánticamente más limpio.
También recuerde aplicar pointer-events: none al pseudoelemento para que no tenga un comportamiento errático cuando alguien pasa el borde fuera del botón como ve en las otras respuestas proporcionadas.
.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>Tienes que agregar solo la pseudo clase :hover .
.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>