A Pen by Đăng Lê

Thumbnail
This awesome code was written by danl33x, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright danl33x ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Đăng Lê</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>My favorite link hover styles</h1>
<section class="links">
  <!-- you can include the HTML from other pens in your pen -->
  <a class="link wipe" href="#">wipe</a>
  <a class="link underline" href="#">underline</a>
  <a id="slide-link" class="link slide" href="#"><span>slide</span></a>
  <a class="link opacity" href="#">opacity</a>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/danl33x/a-pen-by-andx110andx103ng-landxea-mLBopG */
/* you can import CSS from other pens - we'll import color and typography styles from this pen */
@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;
}
.link 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);
}
.opacity:hover {
  color: #124a58;
  background: rgba(255, 255, 255, 0.9);
}

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

.underline {
  border: 2px solid transparent;
}
.underline::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);
}
.underline:hover::after {
  width: 100%;
  height: 2px;
  display: block;
  background-color: #fff;
  content: " ";
  position: absolute;
  top: 34px;
  left: 0;
}


/*Downloaded from https://www.codeseek.co/danl33x/a-pen-by-andx110andx103ng-landxea-mLBopG */
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})
  }});
}

Comments