Como criar um botão 3D com Bootstrap

Aprenda neste tutorial como criar 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.

CSS

 .btn-3d {.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 aprenda de um jeito rápido e fácil como centralizar verticalmente usando CSS com Flexbox. O vídeo é muito útil caso o elemento que deseja centralizar não possua um tamanho definido.


Publicado em 5 de julho de 2017


Dúvidas? Deixe seu comentário.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*
*