I didn't want to use box shadow again, so I tried something different I have been seeing on other CodePens.
A Pen by Thomas Vaeth on CodePen.
<div> | |
Would you like to <a href="https://www.linkedin.com/in/thomasvaeth" target="_blank">connect</a>? | |
</div> | |
// Normalize/Reset only the elements that I am using | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
// Variables | |
$linkedin: #0077b5; | |
$white: #fff; | |
// Start of styling | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
width: 100%; | |
font-family: 'Mada', sans-serif; | |
-webkit-font-smoothing: antialiased; | |
font-size: 3em; | |
} | |
a { | |
position: relative; | |
top: 0; | |
left: 0; | |
margin-right: 0.25em; | |
padding: 0.25em; | |
font-weight: 900; | |
color: $linkedin; | |
text-decoration: none; | |
background-color: $white; | |
border: 8px solid $linkedin; | |
transition: all 0.15s ease-in-out; | |
&:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: -1; | |
display: block; | |
height: calc(100% + 12px); | |
width: calc(100% + 12px); | |
background-color: $linkedin; | |
transition: all 0.15s ease-in-out; | |
} | |
&:hover { | |
top: 6px; | |
left: 6px; | |
&:after { | |
top: -6px; | |
left: -6px; | |
} | |
} | |
} |
<link href="https://fonts.googleapis.com/css?family=Mada:300,900" rel="stylesheet" /> |