Como criar um botão 3D com Bootstrap

Aprenda neste tutorial como fazer um botão 3D com Bootstrap de um jeito rápido e muito fácil. O botão é criado apenas com CSS e possui efeito de movimento e sombra. Assista ao vídeo:

Gostou do vídeo? Então agora é só utilizar a código CSS abaixo para personalizar seu próprio botão.

.btn-3d {
	position: relative;
	top: -6px;
	border: 0;
	transition: all 40ms linear;
	margin-top: 10px;
	margin-left: 2px;
	margin-right: 2px;
}

.btn-3d:active:focus,
.btn-3d:focus:hover,
.btn-3d:focus {
	-moz-outiline-style: none;
	outline: medium none;
}

.btn-3d:active,
.btn-3d.active {
	top: 2px;
}

.btn-3d.btn-primary {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4d5bbe, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #4274d7; 
}

.btn-3d.btn-primary:active,
.btn-3d.btn-primary.active {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #4274d7;
}

Aproveite e inscreva-se em meu canal no Youtube e me ajude a compartilhar conhecimento sobre tecnologia e design de graça.