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>

.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);
}