Estilizando botões de bootstrap do twitter

Os botões do Twitter-Bootstrap são incrivelmente bonitos. Experimente rolando sobre eles

Mas eles são limitados em cores.

Existe alguma maneira de mudar a cor de base do botão e, ao mesmo tempo, manter o belo efeito de foco que o bootstrap tornou tão bonito e sem esforço?

Desconheço completamente a aparência do css / javascript que o Twitter usa para manter esses efeitos.

Basicamente, os botões no Twitter Bootstrap são controlados em CSS por ".btn {}". O que você precisa fazer é ir ao arquivo CSS e encontrar onde diz "btn" e alterar as configurações de cor. No entanto, não é tão simples quanto fazer isso, pois você também precisa alterar a cor do botão quando você o realça, etc. Para fazer ISSO, você deve procurar outras tags em CSS como ".btn: hover {} ", etc.

Mudá-lo requer a mudança do CSS. Aqui está um link rápido para esse arquivo:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Achei que a maneira mais simples é colocar isso em suas substituições. Desculpe pela minha escolha de cor sem imaginação

Bootstrap 4-Alpha SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Exemplo de Bootstrap 4 Alpha SASS

Bootstrap 3 MENOS

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Exemplo de bootstrap 3 LESS

Bootstrap 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Exemplo de Bootstrap 3 SASS

Bootstrap 2.3 MENOS

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Exemplo de bootstrap 2.3 MENOS

Bootstrap 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

Ele cuidará do foco / ativos para você

A partir dos comentários, se você deseja clarear o botão em vez de escurecer ao usar preto (ou apenas deseja inverter), você precisa estender a classe um pouco mais, assim:

Bootstrap 3 SASS Ligthen

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

Exemplo de Bootstrap 3 SASS Lighten

Você pode substituir as cores em seu css, por exemplo, para o botão Perigo:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

Este é um bom recurso: http://charliepark.org/bootstrap_buttons/

Você pode mudar a cor e ver o efeito em ação.

Se você já estiver carregando seu próprio arquivo CSS personalizado após carregar o bootstrap.css (versão 3), você pode adicionar esses 2 estilos CSS ao seu custom.css e eles substituirão os padrões de bootstrap para o estilo de botão padrão.

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

Em vez de alterar os valores CSS um por um, sugiro usar LESS. Bootstrap tem versão MENOS no Github: https://github.com/twbs/bootstrap

LESS permite definir variáveis ​​para alterar as cores, o que o torna muito mais conveniente. Defina a cor uma vez e LESS compila o arquivo CSS que altera os valores globalmente. Economiza tempo e esforço.

Para substituir completamente os estilos de botão de bootstrap, você precisa substituir uma lista de propriedades. Veja o exemplo abaixo.

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

Se você não usar todos os estilos listados, verá os estilos padrão ao executar ações no botão. Por exemplo, depois de clicar no botão e remover o ponteiro do mouse do botão, você verá a cor padrão visível. Ou mantenha o botão pressionado para ver as cores padrão. Portanto, listei todos os pseudo-estilos que devem ser substituídos.

Para substituição do Bootstrap para Sass é

.btn-default {

    @include button-variant($color, $background, $border);

}

Você pode ver a fonte aqui: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Ou tente http://twitterbootstrapbuttons.w3masters.nl/ . Ele cria css para botões com base na entrada de cores html. Adicione o css após o css de bootstrap. Ele oferece três estilos de botões (claro, escuro e giratório).

Esta é uma maneira muito fácil e eficiente: adicione em seu CSS sua classe com as cores que deseja aplicar ao seu botão:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

e adicione o estilo ao botão ou link de bootstrap:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

No Twitter Bootstrap bootstrap 3.0.0, o botão do Twitter é plano. Você pode personalizá-lo em http://getbootstrap.com/customize . Cor do botão, borda radiosa etc.

Além disso, você pode encontrar o código HTML e outras funcionalidades http://twitterbootstrap.org/bootstrap-css-buttons .

O botão Bootstrap 2.3.2 é gradiente, mas 3.0.0 (nova versão) é plano e parece mais legal.

e também você pode encontrar para personalizar toda a aparência e estilo do bootstrap destes recursos: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Eu sei que este é um tópico mais antigo, mas apenas para adicionar outra perspectiva. Eu diria que usar substituições é realmente um cheiro de código e rapidamente sairá do controle em projetos maiores. Hoje você está substituindo botões, amanhã modais, no dia seguinte dropdowns, etc., etc.

Eu aconselho a tentar possivelmente comentar a inclusão de buttons.lesse definir a minha própria ou, encontrar outra biblioteca de botões que seja mais adequada para o meu projeto. Plugue sem vergonha: aqui está um exemplo de como é fácil misturar nossa biblioteca de botões com TB: Usando botões com Twitter Bootstrap . Na prática, novamente, você provavelmente desejaria remover a buttons.lessinclusão completamente para melhorar o desempenho, mas isso mostra como você pode fazer as coisas parecerem um pouco menos "genéricas". Ainda não fiz este exercício, mas imagino que você possa começar simplesmente comentando linhas como:

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

E então recompilar usando `lessc usando um de seus próprios módulos de botões. Dessa forma, você obtém o núcleo do TB testado em batalha, mas ainda pode personalizar as coisas sem recorrer a modificações importantes. Não há absolutamente nenhuma razão para não usar apenas partes de uma biblioteca como o Bootstrap. Claro que o mesmo se aplica à versão Sass do TB

Para Bootstrap (pelo menos para a versão 3.1.1) e LESS, você pode usar isto:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

Isso é definido em bootstrap/less/buttons.less.

Você pode alterar a cor de fundo e usar! Important;

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}