Saludos, comparto mi css para los hovers de los botones de mis redes sociales.
.contenido__descripcion__btn__style{
width: 378px;
background-color: #000000;
font-size: 24px;
border-radius: 8px;
padding: 16px 0;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
border: 2px solid #22D4FD;
display: flex;
justify-content: center;
gap: 16px;
text-decoration: none;
color: #f6f6f6;
position: relative;
z-index: 1;
overflow: hidden;
}
.contenido__descripcion__btn__subtitulo{
font-size: 24px;
font-family: "Krona One", sans-serif;
font-weight: 100;
}
.contenido__descripcion__btn__style:hover {
color: #fff; /* color de fuente hover */
}
.contenido__descripcion__btn__style::after {
content: "";
background: #4741d7; /* color de fondo hover */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
top: 0;
bottom: 0;
left: 100%;
right: -100%;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.contenido__descripcion__btn__style:hover::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}