Dale vida a tus botones e íconos con este efecto flotante, que añade una sensación de profundidad y dinamismo al diseño de tu sitio web. Este recurso es ideal para captar la atención de los usuarios, mejorando la interacción y haciendo que los elementos clave de la interfaz se destaquen de manera sutil y atractiva. Descubre cómo aplicarlo fácilmente con CSS para que tus elementos cobren protagonismo de forma elegante y moderna.
CODIGO CSS
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-10px);
}
100% {
transform: translatey(0px);
}
}
.flotante {
width: 50px;
height:50px;
transform: translatey(0px);
animation: float 3s ease-in-out infinite;
}
NOTA
Ajustar Width y Height al tamaño del botón o icono que se usará
