elegantes - css boton con icono

Diseño de botones de arranque de twitter

Question

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

Pero están limitados en colores.

¿Hay alguna manera en que yo pueda cambiar el color base del botón mientras mantengo el hermoso efecto de deslizamiento 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.

Answer 1

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

Puedes cambiar el color y ver el efecto en acción.

Answer 2

Aquí hay una manera muy fácil y eficiente: agregue su CSS a 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 arranque:

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

Answer 3

Básicamente, los botones en Twitter Bootstrap están controlados en CSS por ".btn {}". Lo que tienes que hacer es ir al archivo CSS y encontrar dónde dice "btn" y cambiar las configuraciones de color. Sin embargo, no es tan simple como hacerlo, ya que también tiene que cambiar el color al que cambia el botón cuando lo resalta, etc. Para hacerlo, debe 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

Answer 4

Descubrí que la manera más simple es poner esto en tus reemplazos. 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 Bootstrap 4 Alpha SASS

Bootstrap 3 LESS

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

Bootstrap 3 LESS Ejemplo

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 LESS

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

Bootstrap 2.3 LESS Ejemplo

Bootstrap 2.3 SASS

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

Se ocupará de los activos / activos para usted

De los comentarios, si quiere aligerar el botón en lugar de oscurecerse cuando usa negro (o simplemente quiere invertir), necesita ampliar la clase un poco más como sigue:

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

Ejemplo de Bootstrap 3 SASS Lighten

Answer 5

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 funcionalidades http://twitterbootstrap.org/bootstrap-css-buttons .

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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 .

Answer 9

Para Bootstrap para Sass anular es

.btn-default {
@include button-variant($color, $background, $border);
}

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

Answer 10

Para anular por completo los estilos del botón de arranque, debe sobrescribir una lista de propiedades. Ver 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 retire el puntero del mouse del botón, verá el color predeterminado visible. O mantén presionado el botón, verás los colores predeterminados. Entonces, he enumerado todos los pseudo-estilos que deben ser anulados.

Answer 11

Puede cambiar el color de fondo y usar! 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;
}

Answer 12

Puede sobreescribir 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]; }

Answer 13

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

Aconsejo intentar posiblemente comentar el include para buttons.less y definir uno propio, o encontrar otra biblioteca de botones que sea más adecuada para mi proyecto. Enchufe desvergonzado: aquí hay un ejemplo de lo fácil que es mezclar nuestra biblioteca de botones con TB: Usar botones con Twitter Bootstrap . En la práctica, de nuevo, es probable que desee eliminar los buttons.less incluirlos en conjunto 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ías 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 forma obtendrás el núcleo de TB probado en la batalla, pero aún puedes personalizar las cosas sin recurrir a las principales anulaciones. No hay 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

Answer 14

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