12

I have a Bootstrap button, in which I overrode the styling in my stylesheet because I wanted to make the button dark, now the button has a hover effect from Bootstrap on it, how can I get rid of it? See the snippet below for the result:

.btn-dark {
  min-width: 100px;
  background-color: black;
  color: white;
  border-radius: 1px;
  text-decoration: none; 
  opacity:1.0;
  box-shadow:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>
Klooven
  • 3,858
  • 1
  • 23
  • 41
Rheo
  • 165
  • 1
  • 2
  • 11

8 Answers8

6

Try using the :hover selector and add more CSS to specify the exact transition designed.

.btn-dark:hover {
  color: white;
}
FlySpaceAge
  • 95
  • 11
6
<!DOCTYPE html>
<html lang="en">


<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .btn-dark{
    min-width: 100px;
    background-color: black;
    color: white;
    border-radius: 1px;
    text-decoration: none;  

}

.btn:hover {
color: #fff !important;
text-decoration: none;
}
    </style>

</head>

<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>
</body>

</html>

fiddle:https://jsfiddle.net/1qmjw47o/

Nikhil S
  • 3,786
  • 4
  • 18
  • 32
2

You also need to override hover in the styling.

.btn-dark: hover {
    //Your style
}
iNovelletto
  • 227
  • 2
  • 4
2

You can set the css on the element to pointer-events:none. Look here.

rootShiv
  • 1,375
  • 2
  • 6
  • 21
new guy
  • 29
  • 2
  • 2
    if you do this then that button becomes unclickable as-well, might not be the wanted behaviour. – nCis Dec 09 '22 at 08:52
1

Just use

    .btn:hover {
}

and write the necesssary.

.btn-dark{
 min-width: 100px;
 background-color: black;
 color: white;
 border-radius: 1px;
 text-decoration: none; 
 opacity:1.0;
 box-shadow:none;
}
.btn-dark:hover {
color: #fff !important;
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>
Franklin Pious
  • 3,670
  • 3
  • 26
  • 30
1

A bit late but it can still help I guess!

In Bootstrap you can do this ro remove both hover and focus effects (just change the variables to match those of your Bootstrap vesrion):

.btn {
    &:hover {
      background-color: var(--bs-btn-bg);
      color: var(--bs-btn-color);
    }
    &:focus {
      background-color: var(--bs-btn-bg);
      color: var(--bs-btn-color);
    }
    &.active {
      &:hover {
        background-color: var(--bs-btn-active-bg);
        color: var(--bs-btn-active-color);
      }
      &:focus {
        background-color: var(--bs-btn-active-bg);
        color: var(--bs-btn-active-color);
      }
    }
  }
soiswis
  • 31
  • 2
  • 5
0

The way i do it is to disable a hover find your button and then put the hover color the same as the button color..

.e-btn.e-flat, .e-css.e-btn.e-flat {
        background-color: #EB780A;
        border-color: #EB780A;
    }

and to disable the hover color - add hover at the end.

.e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover {
        
        background-color: #EB780A;
        border-color: #EB780A;
    }
sinfella
  • 246
  • 2
  • 19
0

The problem with overriding the styles for :hover is that you are messing with the order of precdence for button states in bootstrap, which is based on the specificity of the styles (the order they're defined in), i.e. Because you've defined your style later than those in the bootstrap.css, if you hover over a button with both :hover and some other class like .show or :disabled, it will show your :hover style rather than the other style it's meant to. Instead I would override the bs variables, that way the order of precedence for the original styles remain the same. e.g.

.btn-dark:hover { 
   --bs-btn-hover-color: var(--bs-btn-color);
   --bs-btn-hover-bg: var(--bs-btn-bg);
}
Raj
  • 71
  • 9