<div class="notification">
  <p>Hover over the links.</p>
  <p>Check the first technique <a href="https://codepen.io/tutsplus/pen/ExxZPOQ" target="_blank">here</a>.</p>
</div>
<ul class="menu">
  <li>
    <a data-text="About Us" href="#0">About Us</a>
  </li>
  <li data-animation="to-left">
    <a data-text="Projects" href="#0">Projects</a>
  </li>
  <li data-animation="to-bottom">
    <a data-text="Clients" href="#0">Clients</a>
  </li>
  <li data-animation="to-top">
    <a data-text="Contact" href="#0">Contact</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;
}

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

.menu a {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 60px;
  line-height: 1.4;
  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);*/
}

.menu a::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  color: var(--fill-color);
  white-space: nowrap;
  transition: all 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02);
}

.menu [data-animation] a::before,
.menu a:hover::before {
  width: 100%;
}


/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu [data-animation="to-left"] a,
.menu [data-animation="to-top"] a {
  color: var(--fill-color);
}

.menu [data-animation="to-left"] a::before,
.menu [data-animation="to-top"] a::before {
  color: var(--white);
}

.menu [data-animation="to-left"] a:hover::before {
  width: 0;
}

.menu [data-animation="to-top"] a::before {
  height: 100%;
}

.menu [data-animation="to-top"] a:hover::before {
  height: 0;
}

.menu [data-animation="to-bottom"] a::before {
  height: 0;
}

.menu [data-animation="to-bottom"] a:hover::before {
  height: 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.