Button Hover Effect with box-shadow

Button Hover Effect with box-shadow.markdown

Button Hover Effect with box-shadow

Button Hover Effect with box-shadow property

A Pen by Elior Shalev Tabeka on CodePen.

License.

index.html

<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>

style.css

$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;
			}
	}
}