CSSで作る、naviボタンhover時の前景、背景入れ替えエフェクトです。サンプルのボタンは、前側が白、後ろ側がブルーになっています。このボタンにhoverすると、前側の白と後ろ側のブルーがアニメーションしながら入れ替わります。文字色も白になります。

サンプル

 

サンプルのhtmlソース

<div class="main">
    <ul>
        <li>home</li>
        <li>products</li>
        <li>services</li>
        <li>contact</li>
    </ul>
</div>

サンプルのCSSソース

:root {
	font-size: 10px;
}
div.main ul {
	padding: 0;
	list-style-type: none;
}
div.main ul li {
	width: 20rem;
	height: 7rem;
	font-size: 20px;
	text-align: center;
	line-height: 7rem;
	font-family: sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	position: relative;
	transition: 0.3s;
	margin: 3rem;
}
div.main ul li::before,
div.main ul li::after {
	content: '';
	position: absolute;
	width: inherit;
	height: inherit;
	top: 0;
 	left: 0;
	transition: 0.3s;
}
div.main ul li::before {
	background-color: white;
	z-index: -1;
	box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
div.main ul li::after {
	background-color: #37e;
	transform: translate(1.5rem, 1.5rem);
	z-index: -2;
}
div.main ul li:hover {
	transform: translate(1.5rem, 1.5rem);
	color: white;
}
div.main ul li:hover::before {
	background-color: #37e;
}
div.main ul li:hover::after {
	background-color: white;
	transform: translate(-1.5rem, -1.5rem);
}