Como criar: botão de contorno

Como projetar o estilo do botão de contorno

Primeiro passo - Adicionar HTML:

<button class="btn success">Sucesso</button>
<button class="btn info">Informação</button>
<button class="btn warning">Aviso</button>
<button class="btn danger">Dano</button>
<button class="btn default">Padrão</button>

Segundo passo - Adicionar CSS:

.btn {
  borda: 2px sólida preto;
  cor-fundo: branco;
  cor: preto;
  preenchimento: 14px 28px;
  tamanho-fonte: 16px;
  cursor: ponteiro;
{}
/* Verde */
.success {
  cor-borda: #04AA6D;
  cor: verde
{}
.success:hover {
  cor-fundo: #04AA6D;
  cor: branco;
{}
/* Azul */
.info {
  cor-borda: #2196F3;
  cor: azul-turquesa
{}
.info:hover {
  background: #2196F3;
  cor: branco;
{}
/* Laranja */
.warning {
  cor-borda: #ff9800;
  cor: laranja;
{}
.warning:hover {
  background: #ff9800;
  cor: branco;
{}
/* Vermelho */
.danger {
  cor-borda: #f44336;
  cor: vermelho
{}
.danger:hover {
  background: #f44336;
  cor: branco;
{}
/* Cinza */
.default {
  cor-borda: #e7e7e7;
  cor: preto;
{}
.default:hover {
  background: #e7e7e7;
{}

Experimente você mesmo

adicionar border-radius Atributos para criar botões com contorno arredondado:

.btn {
  border-radius: 5px;
{}

Experimente você mesmo

Páginas relacionadas

Tutorial:Botão CSS