Si buscas un efecto de :hover que destaque cuando se utiliza junto con ::after, podemos crear un botón que revela un mensaje o efecto visualmente atractivo desde debajo del borde inferior al pasar el cursor. Este efecto utiliza el pseudo-elemento ::after para crear una sensación de «deslizamiento» del contenido desde abajo, que se hace visible con el :hover.
El CSS transformará el botón en un contenedor con un borde de color y texto en color que coincide con el borde al inicio. Al pasar el cursor sobre el botón, el color del texto y del borde cambia, haciendo que el texto sea más legible sobre el color de fondo del pseudo-elemento ::after, que se anima para cubrir el botón desde abajo. El contenido del ::after, que es otro mensaje o simplemente un efecto de color sólido, se desliza hacia arriba para llenar completamente el botón, creando un efecto visual de «deslizamiento».
Este ejemplo hace que el efecto de hover sea más perceptible al cambiar significativamente la apariencia del botón y añadir un mensaje interactivo, lo que puede mejorar la experiencia del usuario en tu sitio web.
HTML <div class="item"><button class="slide-effect-button">Desliza sobre mí</button></div>
CSS
.slide-effect-button {
position: relative;
border: 2px solid #007bff;
background-color: transparent;
color: #007bff;
padding: 10px 30px;
font-size: 16px;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
transition: color 0.4s, border-color 0.4s;
}
.slide-effect-button::after {
content: "¡Efecto activado!";
position: absolute;
bottom: -100%;
left: 0;
width: 100%; padding: 10px 0px;
text-align: center;
color: #fff;
background-color: #007bff;
transition: bottom 0.4s;
}
.slide-effect-button:hover {
color: #fff;
border-color: #007bff;
}
.slide-effect-button:hover::after {
bottom: 0;
}