Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Single Element Link Styling
<a href="http://google.com/" target="_blank">Link to<br />Google</a>
@import compass
$red: rgba(255,72,81,1)
a
@include transition( all 0.15s cubic-bezier(.46,.01,.14,1.35))
white-space: nowrap
font-family: "Lato"
font-weight: 900
font-size: 32px
letter-spacing: 2px
text-transform: uppercase
text-decoration: none
color: $red
position: absolute
top: 50%
left: 50%
@include translate( -50% , -50% )
&:after
content: attr(href)
@include transition( all 0s linear)
overflow: hidden
background-color: $red
text-transform: lowercase
position: absolute
font-size: 10px
letter-spacing: 0
font-weight: 500
bottom: -8px
left: 0
width: 100%
display: inline-block
@include translate( -15px , 100% )
padding: 0 15px
max-height: 0
z-index: -1
&:before
content: ""
@include backface-visibility( hidden )
@include transition( all 0.15s cubic-bezier(.46,.01,.14,1.35))
position: absolute
width: 100%
height: 2px
background-color: $red
bottom: -5px
z-index: -2
&:hover
color: white
&:before
padding: 10px 15px
margin-left: -15px
bottom: -10px
height: 100%
&:after
@include transition( all 0.25s cubic-bezier(.46,.01,.14,1.35) 0.3s )
@include translate( -15px , 50% )
padding: 10px 15px
max-height: 30px
opacity: 1
<link href="http://fonts.googleapis.com/css?family=Lato:100,400,900" rel="stylesheet" />
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.