A Pen by Brenden Palmer on CodePen.
Created
September 11, 2015 08:06
-
-
Save anonymous/48baefd8582c97903372 to your computer and use it in GitHub Desktop.
Cool CSS3 Link Ideas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Link Ideas (proof of concept)</h1> | |
<div class="wrapper"> | |
<a class="first after" href="#">Left to Right</a> | |
</div> | |
<div class="wrapper"> | |
<a class="second after" href="#">Right to Left</a> | |
</div> | |
<div class="wrapper"> | |
<a class="third after" href="#">Start Centered</a> | |
</div> | |
<div class="wrapper"> | |
<a class="fourth before after" href="#">Top & Bottom // Left to Right</a> | |
</div> | |
<div class="wrapper"> | |
<a class="fifth before after" href="#">Top & Bottom // Right to Left</a> | |
</div> | |
<div class="wrapper"> | |
<a class="sixth before after" href="#">Top & Bottom // Start Centered</a> | |
</div> | |
<div class="wrapper"> | |
<a class="seventh before after" href="#">Top & Bottom // Opposite Start</a> | |
</div> | |
<div class="wrapper"> | |
<a class="eigth before after" href="#">Top & Bottom // Opposite Start Reversed</a> | |
</div> | |
<div class="wrapper"> | |
<span class="square individual"> | |
<a class="ninth before after" href="#">Cool Square</a> | |
</span> | |
</div> | |
<div class="wrapper"> | |
<span class="square"> | |
<a class="tenth before after" href="#">Cool Square Simultaneous</a> | |
</span> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(http://fonts.googleapis.com/css?family=Open+Sans); | |
body{ | |
font-family:'Open Sans', sans-serif; | |
background:#151837; | |
width:90%; | |
margin:0 auto; | |
padding:2em 0 6em; | |
} | |
h1:before{ | |
content: "// "; | |
} | |
h1{ | |
font-size:3em; | |
color:#fefefe; | |
text-transform:lowercase; | |
} | |
.wrapper{ | |
margin:3em 0; | |
} | |
a,a:visited,a:hover,a:active{ | |
-webkit-backface-visibility:hidden; | |
backface-visibility:hidden; | |
position:relative; | |
transition:0.5s color ease; | |
text-decoration:none; | |
color:#81b3d2; | |
font-size:2.5em; | |
} | |
a:hover{ | |
color:#d73444; | |
} | |
a.before:before,a.after:after{ | |
content: ""; | |
transition:0.5s all ease; | |
-webkit-backface-visibility:hidden; | |
backface-visibility:hidden; | |
position:absolute; | |
} | |
a.before:before{ | |
top:-0.25em; | |
} | |
a.after:after{ | |
bottom:-0.25em; | |
} | |
a.before:before,a.after:after{ | |
height:5px; | |
height:0.35rem; | |
width:0; | |
background:#d73444; | |
} | |
a.first:after{ | |
left:0; | |
} | |
a.second:after{ | |
right:0; | |
} | |
a.third:after,a.sixth:before,a.sixth:after{ | |
left:50%; | |
-webkit-transform:translateX(-50%); | |
transform:translateX(-50%); | |
} | |
a.fourth:before,a.fourth:after{ | |
left:0; | |
} | |
a.fifth:before,a.fifth:after{ | |
right:0; | |
} | |
a.seventh:before{ | |
right:0; | |
} | |
a.seventh:after{ | |
left:0; | |
} | |
a.eigth:before{ | |
left:0; | |
} | |
a.eigth:after{ | |
right:0; | |
} | |
a.before:hover:before,a.after:hover:after{ | |
width:100%; | |
} | |
.square{ | |
box-sizing:border-box; | |
margin-left:-0.4em; | |
position:relative; | |
font-size:2.5em; | |
overflow:hidden; | |
} | |
.square a{ | |
position:static; | |
font-size:100%; | |
padding:0.2em 0.4em; | |
} | |
.square:before,.square:after{ | |
content: ""; | |
box-sizing:border-box; | |
transition:0.25s all ease; | |
-webkit-backface-visibility:hidden; | |
backface-visibility:hidden; | |
position:absolute; | |
width:5px; | |
width:0.35rem; | |
height:0; | |
background:#d73444; | |
} | |
.square:before{ | |
left:0; | |
bottom:-0.2em; | |
} | |
.square.individual:before{ | |
transition-delay:0.6s; | |
} | |
.square:after{ | |
right:0; | |
top:-0.2em; | |
} | |
.square.individual:after{ | |
transition-delay:0.2s; | |
} | |
.square a:before{ | |
left:0; | |
transition:0.25s all ease; | |
} | |
.square a:after{ | |
right:0; | |
transition:0.25s all ease; | |
} | |
.square.individual a:after{ | |
transition:0.25s all ease 0.4s; | |
} | |
.square:hover:before,.square:hover:after{ | |
height:calc(100% + 0.4em); | |
} | |
.square:hover a:before,.square:hover a:after{ | |
width:100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment