Portal GSTI
Portal GSTI

PublicarCadastre-seLogin
Menu
Artigo

Como criar um botão 3D com Bootstrap

foto de
Ricardo Sanches CONTEÚDO EM DESTAQUE

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.

Comentários