<div class="notification">
  <p>Hover over the links.</p>
  <p>Check the second technique <a href="https://codepen.io/tutsplus/pen/dyyzyLy" target="_blank">here</a>.</p>
</div>
<ul class="menu">
  <li>
    <a href="#0">
      About Us
      <span class="outer" aria-hidden="true">
        <span class="inner">About Us</span>
      </span>
    </a>
  </li>
  <li data-animation="to-left">
    <a href="#0">
      Projects
      <span class="outer" aria-hidden="true">
        <span class="inner">Projects</span>
      </span>
    </a>
  </li>
  <li data-animation="to-bottom">
    <a href="#0">
      Clients
      <span class="outer" aria-hidden="true">
        <span class="inner">Clients</span>
      </span>
    </a>
  </li>
  <li data-animation="to-top">
    <a href="#0">
      Contact
      <span class="outer" aria-hidden="true">
        <span class="inner">Contact</span>
      </span>
    </a>
  </li>
</ul>

<ul class="menu has-bg">
  <li>
    <a href="#0">
      Wipe
      <span class="outer" aria-hidden="true">
        <span class="inner">Wipe</span>
      </span>
    </a>
  </li>
</ul>

<footer class="page-footer">
  <small>Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
  </small>
</footer>
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --fill-color: #49b293;
  --secondary-color: #3d8bb1;
  --stroke-color: #1d2a53;
  --white: white;
  --red: #e74c3c;
}

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}


/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.notification {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 9px;
  border-radius: 3px;
  background: var(--fill-color);
}

.notification a {
  text-decoration: underline;
}

.menu {
  text-align: center;
}

.has-bg {
  background: var(--stroke-color);
  padding: 40px 0 60px 0;
  margin-top: 20px;
}

.menu li {
  margin-top: 25px;
}

.menu a {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 60px;
  line-height: 1.4;
  overflow: hidden;
  color: var(--white);
  -webkit-text-stroke: 1px var(--stroke-color);
  /*text-shadow: -1px -1px 0 var(--stroke-color), 1px -1px 0 var(--stroke-color), -1px 1px 0 var(--stroke-color), 1px 1px 0 var(--stroke-color);*/
}

.has-bg a {
  color: var(--secondary-color);
  -webkit-text-stroke: 0;
}

.menu .outer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--fill-color);
  transform: translateX(-100%);
}

.menu .inner {
  display: inline-block;
  transform: translateX(100%);
}

.menu a .outer,
.menu a .inner {
  transition: transform 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02);
}

.menu a:hover .outer,
.menu a:hover .inner {
  transform: none;
}


/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation="to-left"] .outer {
  transform: translateX(100%);
}

[data-animation="to-left"] .inner {
  transform: translateX(-100%);
}

[data-animation="to-top"] .outer {
  transform: translateY(100%);
}

[data-animation="to-top"] .inner {
  transform: translateY(-100%);
}

[data-animation="to-bottom"] .outer {
  transform: translateY(-100%);
}

[data-animation="to-bottom"] .inner {
  transform: translateY(100%);
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1rem;
  color: var(--black);
}

.page-footer span {
  color: var(--red);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.