Estilos de enlace Hover CSS JS HTML - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

miércoles, 14 de marzo de 2018

Estilos de enlace Hover CSS JS HTML

Estilos de enlace  Hover CSS JS HTML
 


Buenas compañeros, les compartimos este tipode Estilos de enlace  Hover CSS JS HTML




DESCARGA EL CODIGO AQUI :

clic

Codigo HTML

<h1>Estilos de enlace  Hover CSS JS HTML</h1>
<section class="links">
<a class="link wipe" href="#">wipe</a>
<a class="link underline" href="#">Subrayar</a>
<a id="slide-link" class="link slide" href="#"><span>Deslizar</span></a>
<a class="link opacity" href="#">Opacar</a>

</section>
CODIGO CSS

@import url(//codepen.io/team/codepen/pen/NxwJpr.css);

.links {
  width: 90%;
  margin: 0 auto;
}

.link {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 34px;
  line-height: 36px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  letter-spacing: 0.1em;
  text-align: center;
  font-size: 0.8rem;
  margin: 10px;
  position: relative;

  span {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
  }
}

.wipe, .slide, .opacity {
  border: 2px solid #fff;
  border-radius: 4px;
  overflow: hidden;
}

.opacity {
  transition: background-color 0.3s linear, color 0.3s linear;
  background: rgba(255,255,255,0);
 
  &:hover {
    color: #124a58;
    background: rgba(255,255,255,0.9);
  }
}

.wipe {
  transition: color 0.3s ease-out;
 
  &::after {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #fff;
    content: " ";
    position: absolute;
    top: 0;
    transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);;
    transform: translateY(34px);
    z-index: -1;
  }
 
  &:hover {
    color: #124a58;
   
    &::after {
      transform: translateY(0px);
    }
  }
}

.underline {
  border: 2px solid transparent;
 
  &::after {
    width: 0%;
    height: 2px;
    display: block;
    background-color: #fff;
    content: " ";
    position: absolute;
    top: 34px;
    left: 50%;
    transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
 
  &:hover {
    &::after {
      width: 100%;
      height: 2px;
      display: block;
      background-color: #fff;
      content: " ";
      position: absolute;
      top: 34px;
      left: 0;
    }
  }
}


CODIGO JS
var $slideLink = $("#slide-link"),
    slideLinkText = $slideLink.find("span")[0];

$slideLink.on("mouseenter", linkOver);

function linkOver() {
  TweenLite.to(slideLinkText, 0.3, {y: -25, ease: Cubic.easeIn, onComplete: function() {
    TweenLite.fromTo(slideLinkText, 0.3, {y: 25}, {y: 0, ease: Cubic.easeOut})
  }});
}

Mas imagenes

Post Top Ad

Responsive Ads Here