Botão com Bootstrap contendo ícones e cantos arredondados

Aprenda como criar um botão com Bootstrap contendo ícones e cantos arredondados usando apenas 2 classes CSS.

O interessante deste vídeo é que você pode usar o botão que irá aprender com todas as classes CSS de botões disponíveis no Bootstrap sem ter muito trabalho.

HTML


<p class="text-center">

<a href="#" class="btn btn-primary btn-custom">

<span class="glyphicon glyphicon-ok img-circle text-primary btn-icon"></span> Acessar

</a>

</p>

<p class="text-center">

<a href="#" class="btn btn-success btn-custom">

<span class="glyphicon glyphicon-refresh img-circle text-success btn-icon"></span> Atualizar

</a>

</p>

<p class="text-center">

<a href="#" class="btn btn-danger btn-custom">

<span class="glyphicon glyphicon-trash img-circle text-danger btn-icon"></span> Apagar

</a>

</p>

CSS


.btn-custom {.btn-custom { padding: 1px 15px 3px 2px; border-radius: 50px;}
.btn-icon { padding: 8px; background: #ffffff;}


Aprenda também como criar efeito de zoom com mouse sobre a imagem só com CSS. Também na segunda parte do vídeo você vai ver como adicionar texto na frente da foto sem que o efeito de zoom seja danificado.

Conheça também meu canal no YouTube. Conteúdos de tecnologia, design e marketing.


Publicado em 8 de agosto 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 *

*
*