<ul class="menu">
<li>
<a href="#0">
<span>About</span>
<span>
<i class="fas fa-address-card" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Projects</span>
<span>
<i class="fas fa-tasks" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Clients</span>
<span>
<i class="fas fa-users" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Contact</span>
<span>
<i class="fas fa-envelope-open-text" aria-hidden="true"></i>
</span>
</a>
</li>
</ul>
<hr>
<ul class="menu" data-animation="to-top">
<li>
<a href="#0">
<span>About</span>
<span>
<i class="fas fa-address-card" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Projects</span>
<span>
<i class="fas fa-tasks" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Clients</span>
<span>
<i class="fas fa-users" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Contact</span>
<span>
<i class="fas fa-envelope-open-text" aria-hidden="true"></i>
</span>
</a>
</li>
</ul>
<hr>
<ul class="menu" data-animation="to-right">
<li>
<a href="#0">
<span>About</span>
<span>
<i class="fas fa-address-card" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Projects</span>
<span>
<i class="fas fa-tasks" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Clients</span>
<span>
<i class="fas fa-users" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Contact</span>
<span>
<i class="fas fa-envelope-open-text" aria-hidden="true"></i>
</span>
</a>
</li>
</ul>
<hr>
<ul class="menu" data-animation="to-left">
<li>
<a href="#0">
<span>About</span>
<span>
<i class="fas fa-address-card" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Projects</span>
<span>
<i class="fas fa-tasks" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Clients</span>
<span>
<i class="fas fa-users" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="#0">
<span>Contact</span>
<span>
<i class="fas fa-envelope-open-text" aria-hidden="true"></i>
</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>
:root {
--body-bg-color: #1a1c1d;
--text-color: #aaaebc;
--hr-color: #26292a;
--red: #e74c3c;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
body {
margin: 30px 0;
font: 22px sans-serif;
background: var(--body-bg-color);
color: var(--text-color);
}
hr {
border-color: var(--hr-color);
margin: 20px 0;
}
.menu {
display: flex;
justify-content: center;
}
.menu li {
margin-right: 70px;
}
.menu a {
position: relative;
display: block;
overflow: hidden;
}
.menu a span {
transition: transform 0.2s ease-out;
}
.menu a span:first-child {
display: inline-block;
padding: 10px;
}
.menu a span:last-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-100%);
}
.menu i {
font-size: 30px;
}
.menu a:hover span:first-child {
transform: translateY(100%);
}
.menu a:hover span:last-child,
.menu[data-animation] a:hover span:last-child {
transform: none;
}
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu[data-animation="to-top"] a span:last-child {
transform: translateY(100%);
}
.menu[data-animation="to-top"] a:hover span:first-child {
transform: translateY(-100%);
}
.menu[data-animation="to-right"] a span:last-child {
transform: translateX(-100%);
}
.menu[data-animation="to-right"] a:hover span:first-child {
transform: translateX(100%);
}
.menu[data-animation="to-left"] a span:last-child {
transform: translateX(100%);
}
.menu[data-animation="to-left"] a:hover span:first-child {
transform: translateX(-100%);
}
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 1rem;
}
.page-footer span {
color: var(--red);
}
This Pen doesn't use any external JavaScript resources.