CODEWITHSUNDEEP
csstwitter-bootstrap
Dia
Dia

Reputation: 65

How Can I change the hover color of a button in Bootstrap 3?

I am new in CSS Bootstrap. Please help me to change the hover color of the button "Go"

<form class="navbar-form navbar-left" role="search">
        <div class="input-group">
            <span class="input-group-btn">
             <button type="submit" class="btn btn-info">Go</button>
            </span>
            <label for="search" class="sr-only">Search</label>
            <input type="text" id="search" class= "form-control" placeholder="Search" >
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
    </form>

Upvotes: 1

Views: 4892

Answers (2)

user7435594
user7435594

Reputation:

try this 

.btn-info:hover {
color: #fff;
background-color: #000;
border-color: #269abc;
}

it will change your color to black on hover. if it is overriding then use !important as mentioned in atul kishore's comment

Upvotes: 0

Ehsan
Ehsan

Reputation: 12969

Don’t use “!important”

Read More : https://j11y.io/css/dont-use-important/

Note : I added ID attribute.

#col:hover {

   background-color: red;

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="navbar-form navbar-left" role="search">
        <div class="input-group">
            <span class="input-group-btn">
             <button type="submit" id="col" class="btn btn-info">Go</button>
            </span>
            <label for="search" class="sr-only">Search</label>
            <input type="text" id="search" class= "form-control" placeholder="Search" >
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
</form>

Upvotes: 1

Related Questions