How can I remove a bootstrap buttons hover effect? - css

Question

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?

Answer 1

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

Answer 2

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. )

Answer 3

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

Answer 4

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!

Answer 5

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