Diseñar botones de arranque de twitter

Los botones de Twitter-Bootstrap son increíblemente hermosos. Pruébelos desplazándose sobre ellos

Pero están limitados en colores.

¿Hay alguna forma de que pueda cambiar el color base del botón manteniendo el hermoso efecto de desplazamiento que el bootstrap ha hecho tan hermoso y sin esfuerzo?

No estoy al tanto de cómo se ve el CSS / JavaScript que usa Twitter para mantener esos efectos.

Básicamente, los botones de Twitter Bootstrap están controlados en CSS por ".btn {}". Lo que tienes que hacer es ir al archivo CSS y encontrar donde dice "btn" y cambiar la configuración de color. Sin embargo, no es tan simple como hacer eso, ya que también tienes que cambiar el color al que cambia el botón cuando lo resaltas, etc. Para hacer ESO, debes buscar otras etiquetas en CSS como ".btn: hover {} ", etc.

Cambiarlo requiere cambiar el CSS. Aquí hay un enlace rápido a ese archivo:

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

Encontré que la forma más sencilla es poner esto en sus anulaciones. Perdón 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);
}

Ejemplo 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);
}

Ejemplo de Bootstrap 3 MENOS

Bootstrap 3 SASS

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

Ejemplo 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);
}

Ejemplo de Bootstrap 2.3 LESS

Bootstrap 2.3 SASS

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

Se encargará de los activos flotantes por ti

De los comentarios, si desea aclarar el botón en lugar de oscurecer cuando usa negro (o simplemente desea invertir), debe 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 Lighten Ejemplo

Puede sobrescribir los colores en su CSS, por ejemplo, para el botón 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 custom.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 de CSS uno por uno, sugeriría usar MENOS. Bootstrap tiene MENOS versión en Github: https://github.com/twbs/bootstrap

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

Para anular completamente los estilos del botón de arranque, debe 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 usa todos los estilos enumerados, verá los estilos predeterminados al realizar acciones en el botón. Por ejemplo, una vez que haga clic en el botón y quite el puntero del mouse 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 pseudoestilos que deben anularse.

Para Bootstrap for Sass override es

.btn-default {

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

}

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

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

Aquí tienes una forma muy fácil y eficiente: agrega en tu CSS tu clase con los colores que deseas aplicar a tu botón:

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

y agregue el estilo a su botón de arranque o enlace:

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

En Twitter Bootstrap bootstrap 3.0.0, el botón de Twitter es plano. Puede personalizarlo desde http://getbootstrap.com/customize . Color del botón, borde radiante, etc.

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

El botón Bootstrap 2.3.2 es degradado pero 3.0.0 (nueva versión) plano y se ve más genial.

y también puede encontrar para personalizar todo el aspecto y el estilo de bootstrap de estos recursos: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Sé que este es un hilo más antiguo, pero solo para agregar otra perspectiva. Afirmaría que el uso de anulaciones es realmente un olor a código y rápidamente se saldrá de control en proyectos más grandes. Hoy estás anulando los botones, mañana los modales, al día siguiente los desplegables, etc., etc.

Aconsejaría intentar posiblemente comentar la inclusión buttons.lessy definir la mía propia o buscar otra biblioteca de botones que sea más adecuada para mi proyecto. Enchufe descarado: aquí hay un ejemplo de lo fácil que es mezclar nuestra biblioteca de botones con TB: uso de botones con Twitter Bootstrap . En la práctica, nuevamente, es probable que desee eliminar la buttons.lessinclusión 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, obtiene el núcleo de TB probado en batalla, pero aún puede personalizar las cosas sin tener que recurrir a modificaciones 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 LESS, 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 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;
}