CSS3 Tricks - Hover button effects

El lenguaje de CSS es el que permite diseƱar visualmente componentes de un sitio web, permite dar estilo, formas, colores, entre otros aspectos, en este artƭculo se destacan algunos efectos que se pueden conseguir gracias a CSS.

Toda acciĆ³n que el usuario realiza dentro de un software o sitio web puede ser obtenida a travĆ©s de eventos, en el Ć”rea de ProgramaciĆ³n de Computadoras es importante conocer como capturar esos eventos de parte del usuario (cuando hace clic, doble clic, cuando desliza el mouse, cuando entra en una caja de texto...) para que el software pueda realizar acciones a partir de ello, un ejemplo se ve en CSS cuando se utiliza el evento hover (cuando se coloca el mouse sobre un objeto, ya sea imagen o botĆ³n, entre otros), con CSS podemos establecer cambios en el diseƱo en el momento que el usuario deslice el mouse sobre ese elemento, usando la regla button:hover.

Efectos

  • Animate icon (icono animado)
  • Ghost (espectro)
  • Fade In (desvanecer)
  • Grow In (agrandar)
  • Bounce (rebote)
  • Skew (sesgar)
  • Hightlight border (destacar borde)
  • Flip 3D (voltear)
  • Shiny (brillante)
  • Border double (borde doble)

Result

See the Pen CSS hover button effects by Vladimir Salguero (@vladisalguero) on CodePen.