Hasta ahora he creado un botón y doy la misma propiedad para el botón. Utilicé linear-gradient como background-image posicioné la imagen en el centro del elemento y luego transicioné background-size de 0% 100% a 100% 100% al pasar el mouse. Pero no hice otra animación cuando dejé el mouse sobre el color de fondo del botón que venía de las esquinas al centro del botón como border-radius en el centro del botón.
A continuación se muestra mi código:
button { position: relative; display: inline-block; padding: 15px 70px; border-radius: 5px; color: black; font-size: 30px; font-family: arial; background-color: #D5C264; background-image: linear-gradient(#000000, #000000); background-repeat: no-repeat; transition: background-size .3s, color .3s; } .center-corner { background-position: 50% 50%; } .center-corner { background-size: 0% 0%; } button:hover { background-size: 100% 100%; color: #fff; } <button class='center-corner'>NEXT</button>Quiero crear este efecto exactamente por UI/UX que estoy compartiendo el enlace: (este es el botón al que me refiero cuando paso el mouse para cambiar el color de fondo)
[![ingrese la descripción de la imagen aquí][1]][1]
Cualquiera ayuda.
Use un div dentro del botón:
button { cursor: pointer; /* now added in my edit */ display: inline-block; padding: 15px 70px; border-radius: 5px; color: black; font-size: 30px; font-family: arial; background-color: #D5C264; transition: color .8s; position: relative; /* now changed in my edit */ z-index: 1; /* because text to be placed over the background */ overflow: hidden; /* because background of div not to be overflow from button. */ } .background { width: 0; height: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* top-left and transform are for putting div in the middle of button.*/ background-image: linear-gradient(#000000, #000000); transition: .8s; z-index: -1; border-radius: 50%; } button:hover { color: white; } button:hover .background { width: 150%; height: 500%; /* 150% and 500% because div completely to be fill the space of the button.*/ } <button class='center-corner'> <div class="background"></div>NEXT </button>