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