Wipe Hover Effect

Wipe Hover Effect / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Wipe Hover Effect

Wipe Hover Effect, en castellano quiere decir "efecto cortinilla" con hover, como ya he dicho en otros ejemplos, Este tipo de efectos son decorativos, pero nos ayudan a enfatizar enlaces u otros elementos de nuestra web y darles un contenido extra con "before".

See the Pen owezoe by Mariano J. (@didac) on CodePen.

El HTML es muy sencillo, solo un href, con las class "btn".

class "btn":

.btn {
  display: inline-block;
  padding: 12px 18px;
  text-decoration: none;
  position: relative;
  border: 2px solid #445561;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  color: #445561;
  overflow: hidden;
  font-weight: 700;
}

Para el hover, destacan dos elementos en el CSS:

  .btn:before, .btn:after {
  content: "GO!";
  text-align: center;
  padding-top: inherit;
  padding-bottom: inherit;
  position: absolute;
  top: 0;
  overflow: hidden;
  color: #fff;
  background: repeating-linear-gradient( 45deg, #95191E 20px, #95191E 40px, #E30F13 40px, #E30F13 60px );
}

.btn:hover:before {
  width: 100%;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  left: 0;
  right: 0;
}

.btn:hover:after {
  right: 0;
  text-indent: 0;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
}

".btn:before, .btn:after". Donde indicamos el texto que va a tener el botón y el background

".btn:hover:before y .btn:hover:after". Donde indicamos, entre otras cosas, el tiempo de la transición al realizar el hover.

Este efecto puedes verlo aplicado en las webs corporativas Pymeuropa y Referencia2

Puedes ver y descargar este ejemplo en mi perfil de Codepen.

Mariano J.

Escribe un comentario

Tu email no se hará visible