Lo he hecho hasta ahora para crear un botón y dentro de un botón de etiqueta he creado otro div con fondo de clase para dar la misma propiedad para los efectos de animación al hacer clic en el botón. Pero no estoy seguro si de esta manera es una sintaxis regular para HTML poner otro div en el botón de etiqueta en mi caso. COMPARTO MI CÓDIGO:
button { height: 73px; min-width: 198px; border-radius: 5px; background-color: $gold; border-color: $gold; position: relative; overflow: hidden; display: inline-block; font-size: 1.313rem; color: black; z-index: 2; line-height: 30.24px; font-weight: bold; text-transform: uppercase; } .background { width: 0; height: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: linear-gradient(#000000, #000000); transition: .5s; z-index: -1; border-radius: 50%; } button:hover { color: $gold; } button:hover .background { width: 500%; height: 500%; } <button class='btn'> <div class="background"></div>Contact </button>Pero cuando hago clic en el botón, queremos que el color de fondo se muestre como un círculo y no como un eclipse en el centro del botón. Exactamente por Figma ingrese la descripción del enlace aquí
o código pene: ingrese la descripción del enlace aquí
El problema en su enfoque es que está configurando el width y la height del fondo en proporciones 1: 1. Esto haría un círculo para un botón cuadrado. Para crear un círculo, debe hacerlo proporcional al ancho y alto de su botón. Por ejemplo:
button { height: 73px; min-width: 198px; border-radius: 5px; background-color: $gold; border-color: $gold; position: relative; overflow: hidden; display: inline-block; font-size: 1.313rem; color: black; z-index: 2; line-height: 30.24px; font-weight: bold; text-transform: uppercase; } .background { width: 0; height: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: linear-gradient(#000000, #000000); transition: .5s; z-index: -1; border-radius: 50%; } button:hover { color: $gold; } button:hover .background { width: 150%; height: 406%; } <button class='btn'> <span class="background"></span>Contact </button>Para obtener el ancho proporcional, puede usar en su caso (198/73) * alto. Entonces, si elige que su altura sea del 130%, debería tener un ancho del 353%. Cuanto mayor sea el porcentaje, más rápida será la animación, así que tenlo en cuenta.
button:hover .background { width: 120%; height: 300%; }