Hover – los efectos que ocurren al pasar el mouse con html5 y css3

DESCARGA : Hover

Hover – los efectos que ocurren al pasar el mouse con html5 y css, presentamos una colección de CSS3 impulsado con efectos de activación que se aplicarán a llamar a las acciones de botones o logos. Puedes aplicar fácilmente a tus propios elementos (etiquetas html), modificar o simplemente utilizar para probar el plugin.

Los detalles del front-end cuentan en la implementación de algún sistema, sitio web o más si eres una persona muy entusiasta y que realiza detalles con los botones, puedes implementar Hover que sin pensarlo te ayudara en lo que posibolemente te lleve un poco de tiempo y sea más de lo predestinado.

Lo que Hover tiene para nosotros es:

  1. Transformaciones 2D
  2. Transiciones
  3. Sombrear e iluminar.
  4. Burbujas
  5. Dobles

Las diferentes modalidades las cuales actúa esta librería son sin duda una manera en que los diseñadores o programadores están buscando la manera de ayudar a quien necesita apoyo y la de compartir su conocimiento, tal es el grado que la documentación esta muy clara:

1.- Descarga hover.css
2.- En hover.css, busca ‘Grow’ CSS, ahí están los efectos.

Este es el código de Grow:

/* Grow */

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

La implementación

<a class="button grow">Add to Basket</a>

Puedes ver los ejemplos antes de utilizar: http://ianlunn.github.io/Hover/

La descarga también la puedes realizar en github: https://github.com/IanLunn/Hover.

Recuerda que normalmente los plugins o librerías que tenemos a disposicion para la descarga cuentan con ejemplos implementados dentro de la carpeta, que te puedes descargar en la parte superior izquierda de este sitio.

You may also like...