CODEWITHSUNDEEP
csstwitter-bootstrap
Weblurk
Weblurk

Reputation: 6822

How can I remove a bootstrap buttons hover effect?

I've gotten an assignment to remove the hover effect of the following button:

Visit http://www.appsbayou.se, search for the text "Kontaktinformation". Above it there's a button, "Skicka" which has an ugly black hover effect. This style comes from existing css.

I'm using Chrome and even if I open up Devtools I can't nail down the style rule that does this effect.

How can I remove this black hover color or at least change it to a color of my choosing?

Upvotes: 1

Views: 18754

Answers (5)

musicformellons
musicformellons

Reputation: 13433

In BS4 you also need to overwrite the button:before pseudo-selector to set opacity to zero, otherwise hover remains, so you will end up with something like:

button.greyed-out-disabled,
button.greyed-out-disabled:focus,
button.greyed-out-disabled:hover {
  background-color: #E3E3E3 !important;
  color: #9E9E9E !important;
  outline: none;
}

button.greyed-out-disabled:before {
  background: rgba(255,255,255,0) !important;
}

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

You will need to toggle the hover state inside the developer tools in order to view the CSS which is applied to the button on hover state. Adding this CSS to your stylesheet will fix the problem:

input[type=submit]:hover {
     background-position: 0px;
}

Upvotes: 6

meadowstream
meadowstream

Reputation: 4151

You have these rules:

input[type=submit]:hover {
  color: #fff;
  background-color: #222; // Here is the black background-color
  text-decoration: none;
  background-position: 0 -15px; // moves the background
  -webkit-transition: background-position .1s linear;
  -moz-transition: background-position .1s linear;
  -o-transition: background-position .1s linear;
  transition: background-position .1s linear;
}

.wpcf7-submit:hover {
  background-image: linear-gradient(to bottom,#fb8800,#975200) !important; // remove this?
}

Simply change the backgound-color to your choice of color. I would also suggest removing the gradient hover and the background positioning if you only wish to change a color. (And of course then the transitions doesn't make much sense either. )

Upvotes: 2

austin wernli
austin wernli

Reputation: 1801

remove this from the page

.wpcf7-submit:hover{
background-image: linear-gradient(to bottom,#fb8800,#975200) !important;
}

or do a search for it... find it... then kill it!

Upvotes: 1

IbrahimMitko
IbrahimMitko

Reputation: 1207

Go into the HTML and you will see this line which is the button:

<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Skicka">

Remove the wpcf7-submit to get rid of the orange. It changes the color of the button but it may be a solution.

Or go into the CSS file and change this attribute:

.wpcf7-submit {
    background-image: linear-gradient(to bottom, #fb8800, #975200) !important;
}

The code for the orange is #fb8800

Upvotes: 1

Related Questions