Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change hover color on a button with Bootstrap customization

I am trying to style my buttons in a way that the hover makes the button a lighter shade instead of a darker shade. I tried bootstrap customization page(http://getbootstrap.com/customize/) and it doesn't give me an option to change the button hover color. I tried doing this manually by inspecting the CSS but it is unclear how the buttons are getting the hover color. I tried another bootstrap customization website

http://pikock.github.io/bootstrap-magic/app/#!/editor

I wanted the main color to be #0495c9 and the hover color to be #00b3db but I am only able to specify the button bg color and not it's hover color.

Any help will be appreciated

like image 357
streetsoldier Avatar asked Sep 18 '14 22:09

streetsoldier


People also ask

How do you change the color of button on hovering?

To change the color/size of the button in hover state. Approach: Set the animation and time duration of hover state. Set background color using @keyframes.

How can change hover effect in Bootstrap button?

Bootstrap Primary Button Hover Color In Bootstrap, a “primary” button is created by adding classes btn and btn-primary to a button element. If you desire to change the styling for the primary button, simply target the . btn-primary class in your CSS file.

How do you change the color of a button Bootstrap?

Bootstrap Button Colors You can by using the . btn class in your HTML and the class selector in your CSS.

Can you customize Bootstrap buttons?

Because of its framework, Bootstrap's buttons are already styled when they're added to the site. However, if you want to create your own custom button style, you can do that in Bootstrap's CSS file. If you haven't yet installed Bootstrap on your server, see our Setting Up Bootstrap on Your Server article.

How to change the background color of the button using CSS?

To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the .button selector, you use background-color:#0a0a23; to change the background color of the button.

How do I change the color of a button in chrome?

This is an example of how the native styles for buttons look on the Google Chrome browser. To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the .button selector, you use background-color:#0a0a23; to change the background color of the button.

What does a hover button mean in HTML?

a.button a:hover means "a link that's being hovered over that is a child of a link with the class button ". Go instead for a.button:hover.

How do I style a button using CSS?

The class="button" attribute will be used to style the button in a separate CSS file. The value button could be any other name you choose. For example you could have used class="btn". The text Click me! is the visible text inside the button. Any styles that will be applied to the button will go inside a spearate style.css file.


Video Answer


2 Answers

The color for your buttons comes from the btn-x classes (e.g., btn-primary, btn-success), so if you want to manually change the colors by writing your own custom css rules, you'll need to change:

/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/ .btn-primary {     color: #fff;     background-color: #0495c9;     border-color: #357ebd; /*set the color you want here*/ } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {     color: #fff;     background-color: #00b3db;     border-color: #285e8e; /*set the color you want here*/ } 
like image 197
jme11 Avatar answered Oct 21 '22 10:10

jme11


or can do this...
set all btn ( class name like : .btn- + $theme-colors: map-merge ) styles at one time :

@each $color, $value in $theme-colors {   .btn-#{$color} {     @include button-variant($value, $value,     // modify     $hover-background: lighten($value, 7.5%),     $hover-border: lighten($value, 10%),     $active-background: lighten($value, 10%),     $active-border: lighten($value, 12.5%)     // /modify     );   } }  // code from "node_modules/bootstrap/scss/_buttons.scss" 

should add into your customization scss file.

like image 25
Hel Lo Avatar answered Oct 21 '22 09:10

Hel Lo