Exemplo de sombras com CSS - Voltar

<div id="lenta" class="sombra">
	<p>Box-Shadow com transição lenta</p>
</div>
<div id="rapida" class="sombra">
	<p>Box-Shadow com transição rápida</p>
</div>
<div id="dupla" class="sombra">
	<p>Exemplo de sombra dupla</p>
</div>

.sombra {
	width: 400px;
	height: 50px;
	margin: 100px;
	padding: 20px 20px 40px 20px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	text-align: center;
	border-radius: 50px;
	cursor: pointer;
}

#lenta {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
	transition: box-shadow 500ms;
}

#lenta:hover {
	box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.5);
}

#rapida {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
	transition: box-shadow 100ms;
}

#rapida:hover{
	box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.5);
}

#dupla {
	background: #ededed;
	width: 400px;
	height: 50px;
	margin: 100px;
	padding: 20px 20px 40px 20px;
	border: 1px solid #ccc;
	border-radius: 8px;
	cursor: pointer;
	font-family: Arial, sans-serif;
	font-size: 16px;
	text-align: center;
	position: relative;
	transition: 0.5s ease;
}

#dupla::before, #dupla::after {
	content: "";
	position: absolute;
	bottom: 5px;
	width: 65%;
	height: 30px;
	background: rgba(0, 0, 0, 0.4);
	transform: skewY(5deg);
	z-index: -1;
	filter: blur(4px);
	transition: opacity 0.5s ease;
	opacity: 1;
}

#dupla::before {
	left: 32%;
	transform-origin: left;
}

#dupla::after {
	right: 32%;
	transform-origin: right;
	transform: skewY(-5deg);
}

#dupla:hover::before, #dupla:hover::after {
	opacity: 0;
}