Estilo botones bootstrap de twitter

He encontrado que la forma más sencilla es poner esto en sus anulaciones. Lo siento por mi elección de color poco imaginativa

Bootstrap 4-Alpha SASS

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

Bootstrap 4 Alpha SASS Ejemplo

Bootstrap 3 MENOS

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

Bootstrap 3 MENOS Ejemplo

Bootstrap 3 SASS

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

Bootstrap 3 SASS Ejemplo

Bootstrap 2.3 MENOS

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

Bootstrap 2.3 LESS Example

Bootstrap 2.3 SASS

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

Se encargará de los hover/activos para usted

Desde los comentarios, si quieres aclarar el botón en lugar de oscurecerlo cuando usas negro (o simplemente quieres invertirlo) necesitas extender la clase un poco más así:

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
  }
}

Bootstrap 3 SASS Aligerar Ejemplo

Puede sobrescribir los colores en su css, por ejemplo para el botón de peligro:

.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]; }

Aquí hay un buen recurso: http://charliepark.org/bootstrap_buttons /

Puede cambiar de color y ver el efecto en acción.

Si ya está cargando su propio archivo CSS personalizado después de cargar bootstrap.css (versión 3) puede agregar estos 2 estilos CSS a su personalizado.css y anularán los valores predeterminados de bootstrap para el estilo de botón predeterminado.

.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;
}

En lugar de cambiar los valores CSS uno por uno, sugeriría usar LESS. Bootstrap tiene una versión MENOS en Github: https://github.com/twbs/bootstrap

LESS le permite definir variables para cambiar los colores, lo que lo hace mucho más conveniente. Define color una vez y MENOS compila el archivo CSS que cambia los valores globalmente. Ahorra tiempo y esfuerzo.

Para anular completamente los estilos de botón bootstrap, necesita anular una lista de propiedades. Vea el siguiente ejemplo.

    .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;
    }

Si no utiliza todos los estilos listados, verá los estilos predeterminados en el botón realizar acciones en. Por ejemplo, una vez que haga clic en el botón y elimine el puntero del ratón del botón, verá el color predeterminado visible. O mantenga presionado el botón, verá los colores predeterminados. Por lo tanto, he enumerado todos los pseudo-estilos que deben ser anular.

Para Bootstrap para Sass override es

.btn-default {

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

}

Puedes ver la fuente aquí: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

O intenta http://twitterbootstrapbuttons.w3masters.nl / . Crea css para botones basados en la entrada de color html. Agregue el css después del css de bootstrap. Proporciona tres estilos de botones (claro, oscuro y spin).

Aquí hay una manera muy fácil y eficiente: agregue en su CSS su clase con los colores que desea aplicar a su botón:

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

Y agrega el estilo a tu botón o enlace de bootstrap:

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

In Twitter Bootstrap bootstrap 3.0.0, El botón de Twitter es plano. Puedes personalizarlo desde http://getbootstrap.com/customize . Color del botón, borde radioso, etc.

También puede encontrar el código HTML y otras funcionalidades http://twitterbootstrap.org/bootstrap-css-buttons .

Bootstrap 2.3.2 botón es degradado, pero 3.0.0 ( nueva versión ) plana y se ve más fresco.

Y también se puede encontrar para personalizar todo el bootstrap se ve y estilo de este recurso: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources /

Sé que este es un hilo más antiguo, pero solo para agregar otra perspectiva. Me gustaría afirmar que el uso de anulaciones es realmente un poco de un olor a código y rápidamente se va de las manos en proyectos más grandes. Hoy estás anulando Botones, Modales de mañana, desplegables al día siguiente, etc., sucesivamente.

Aconsejaría intentar posiblemente comentar la inclusión para buttons.less y definir mi propio, o, encontrar otra biblioteca de botones que es más adecuado para mi proyecto. Shameless plug: he aquí un ejemplo de lo fácil que es es mezclar nuestra biblioteca de Botones con TB: Usando Botones con Twitter Bootstrap. En la práctica, una vez más, es probable que desee eliminar el buttons.less include por completo para mejorar el rendimiento, pero esto muestra cómo puede hacer que las cosas se vean un poco menos "genéricas". Todavía no he hecho este ejercicio, pero me imagino que podría comenzar simplemente comentando líneas como:

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

Y luego recompilar usando 'lessc usando uno de sus propios módulos de botones. De esa manera, obtienes el núcleo de TB probado en batalla, pero aún puedes personalizar las cosas sin recurrir a invalidaciones importantes. No hay absolutamente ninguna razón para no usar solo partes de una biblioteca como Bootstrap. Por supuesto, lo mismo se aplica a la versión Sass de TB

Para Bootstrap (al menos para la versión 3.1.1) y MENOS, puede usar esto:

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

Esto se define en bootstrap/less/buttons.less.

Puede cambiar el color de fondo y el uso !importante;

.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;
}