Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Link Style Tests
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<div class="one">
<a href="#">Hyperlink</a>
<a href="#">Another</a>
<a href="#">One More</a>
</div>
<div class="two">
<p>This is what a <a href="#">Hyperlink</a> would look like in a normal paragraph. Here is some dummy text to test how a <a href="#">link</a> will appear within copy. Here is one more link <a href="#">just for fun</a>.</p>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body {
margin: 0;
}
.one {
margin: 50px auto 20px auto;
padding: 10px;
border-bottom: 2px solid #eee;
width: 500px;
}
.two p {
font-family: 'Lato';
font-size: 18px;
font-weight: 300;
line-height: 32px;
}
.one a {
font-family: 'Lato';
text-decoration: none;
font-size: 26px;
color: #000;
font-weight: 900;
margin: 0 20px 0 0;
position: relative;
}
.one a:before {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background-color: #000;
content: '';
-webkit-transform: translateY(8px);
opacity: 0;
transition-property: -webkit-transform, opacity;
transition-duration: .3s;
}
.one a:hover:before {
-webkit-transform: translateY(0);
opacity: 1;
}
.two {
margin: 0px auto;
width: 500px;
}
.two a {
font-family: 'Lato';
text-decoration: none;
font-size: 18px;
color: #000;
font-weight: 300;
margin: 0 2px;
position: relative;
}
.two a:before {
position: absolute;
margin: 0 auto;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
content: '';
opacity: .3;
-webkit-transform: scaleX(.9);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
}
.two a:hover:before {
opacity: 1;
-webkit-transform: scaleX(1);
}
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.