Como criar: botão de texto

Como definir o estilo do botão de texto

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:

Para obter o aspecto do 'botão de texto', removemos a cor de fundo e a borda padrão:

.btn {
  borda: none;
  cor-fundo: inherit;
  preenchimento: 14px 28px;
  tamanho-fonte: 16px;
  cursor: pointer;
  display: inline-block;
}
/* No mouse-over */
.btn:hover {fundo: #eee;}
.success {cor: verde;}
.info {cor: roxo;}
.warning {cor: laranja;}
.danger {cor: vermelho;}
.default {cor: preto;}

Experimente você mesmo

Botão de texto com fundo separado

Botão de texto com cor de fundo específica ao passar o mouse:

.btn {
    borda: none;
    cor-fundo: inherit;
    preenchimento: 14px 28px;
    tamanho-fonte: 16px;
    cursor: pointer;
    display: inline-block;
}
/* Verde */
.success {
    cor: verde;
}
.success:hover {
    cor-fundo: #04AA6D;
    cor: branco;
}
/* Azul */
.info {
    cor: roxo;
}
.info:hover {
    fundo: #2196F3;
    cor: branco;
}
/* Laranja */
.warning {
    cor: laranja;
}
.warning:hover {
    fundo: #ff9800;
    cor: branco;
}
/* Vermelho */
.danger {
    cor: vermelho;
}
.danger:hover {
    fundo: #f44336;
    cor: branco;
}
/* Cinza */
.default {
    cor: preto;
}
.default:hover {
    background: #e7e7e7;
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Botão CSS