Skip to content

Instantly share code, notes, and snippets.

@danielpataki danielpataki/link.css
Last active May 15, 2017

Embed
What would you like to do?
Microinteractions
nav {
margin:100px 0 0 100px
}
nav a {
text-decoration: none;
color: #fff;
display:inline-block;
position: relative;
margin-right: 22px
}
nav a::before {
background:#fff;
height:1px;
opacity:0.4;
content:' ';
width:100%;
display:block;
position: absolute;
transition: all 100ms linear
}
.title {
padding-top:15px;
font-size:22px;
text-transform: uppercase;
font-weight: 100;
display:block
}
.subtitle {
font-size:11px;
display:block;
margin-top:6px;
text-align: center;
opacity:0;
bottom:-11px;
position: relative;
transition: all 100ms linear;
font-style: italic;
}
nav a:hover::before {
height:4px;
opacity:1;
}
nav a:hover .subtitle {
opacity:0.6;
bottom:0px
}
<nav>
<a href="#">
<span class="title">Our Menu</span>
<span class="subtitle">food for the soul</span>
</a>
<a href="#">
<span class="title">Locations</span>
<span class="subtitle">just around the bend<span>
</a>
<a href="#">
<span class="title">Contact Us</span>
<span class="subtitle">how can we help?</span>
</a>
<a href="#">
<span class="title">About Us</span>
<span class="subtitle">our little family</span>
</a>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.