Button Hover Effect with box-shadow property
A Pen by Elior Shalev Tabeka on CodePen.
<div><svg class="btn-icon btn-icon--vis" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></div> |
$background : hsl(166,70%,50%); | |
$inner_shadow: hsl(30,20%,98%); | |
$drop_shadow : hsl(164,60%,40%); | |
$svg_fill: $drop_shadow; | |
$svg_fill_hover: $inner_shadow; | |
html, body { | |
height: 100%; | |
} | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: $background; | |
overflow: hidden; | |
} | |
div { | |
width: 120px; | |
height: 120px; | |
border-radius: 100%; | |
box-shadow: 0 40px 60px $drop_shadow,0 0 0 $inner_shadow inset; | |
background: $background; | |
margin: 0 20px; | |
transition: box-shadow .2s ease, transform .5s ease, margin-top .2s ease; | |
cursor: pointer; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
svg { | |
height: 48px; | |
width: 48px; | |
transform: scale(1,1); | |
fill: $svg_fill_hover; | |
} | |
&:hover { | |
transform: scale(1.1,1.1); | |
box-shadow: 0 60px 120px $drop_shadow, 0 -120px 0 $inner_shadow inset; | |
svg { | |
transform: scale(1.2,1.2); | |
fill: $svg_fill; | |
transition: transform .2s ease, fill .2s ease; | |
} | |
} | |
&:active { | |
margin-top: 5px; | |
box-shadow: 0 40px 60px $drop_shadow,0 0 0 $inner_shadow inset; | |
svg { | |
fill: $svg_fill_hover; | |
} | |
} | |
} |