方向ごとに値を変えたシャドウを使ってきれいなhoverエフェクトです。下のサンプルの右側「a要素(hover時)」にhoverすると、浮かび上がるような動きのシャドウエフェクトが発動します。クリックすると更に少しだけ変化します。左側の「h1要素(常時表示)」は、h1要素でhoverエフェクトと同じシャドウを常時表示しています。

h1要素(常時表示)

a要素(hover時)

 

hover部分のCSSソース

.element--hover {
	cursor: pointer;
	transition: box-shadow 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99), transform 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99);
	}
.element--hover:hover {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 8px 32px 32px rgba(0, 0, 0, 0.15), 8px 64px 64px rgba(0, 0, 0, 0.15);
	transform: scale(1.05) translateY(-0.5rem);
	}
.element--hover:active {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 8px 16px 16px rgba(0, 0, 0, 0.15), 8px 32px 32px rgba(0, 0, 0, 0.15);
	}
引用と参考;https://codepen.io/ajspencer/pen/xXQbvK
戻るボタン