Estoy tratando de hacer el mismo efecto animado cuando paso el mouse sobre el botón. En primer lugar, cuando pase el mouse sobre el botón para expandir el color de fondo negro en la horizontal del botón, creo que ¿debería usar alguna propiedad de transacción? En segundo lugar, cuando deje el mouse sobre el botón, el color de fondo se estrangula como un radio de borde en el centro del botón.
Lo he hecho hasta ahora para crear una clase btn y poner los mismos estilos en el encabezado de la etiqueta como el código a continuación. Pero cuando dejo el mouse sobre el botón, el color de fondo no se estrangula en el centro como mencioné antes.
<style> body { background: #2ecc71; font-size: 62.5%; } .container { padding: 2em; } /* GENERAL BUTTON STYLING */ button, button::after { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } button { background: none; border: 3px solid #fff; border-radius: 5px; color: #fff; display: block; font-size: 1.6em; font-weight: bold; margin: 1em auto; padding: 2em 6em; position: relative; text-transform: uppercase; } button::before, button::after { background: black; content: ''; position: absolute; z-index: -1; } button:hover { color: #2ecc71; } .btn-3::after { height: 0; left: 50%; top: 50%; width: 0; } .btn-3:hover:after { height: 100%; left: 0; top: 0; width: 100%; } /* BUTTON 4 */ </style> <body> <div class="container"> <button class="btn-3">Button 3</button> </div> </body>Esto es exactamente lo que quiero crear para el botón al pasar el mouse por el diseño UI/UX: ingrese la descripción del enlace aquí .
Por Figma, estoy hablando de este botón: [! [ingrese la descripción de la imagen aquí] [2]] [2]