How to remove hover effect from Bootstrap button?

Question

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>

We're talking BS3 here, answers do not work for BS4. – musicformellons Feb 18 '21 at 12:44 — musicformellons, Feb 18 '21 at 12:44

score 6 · Answer 1 · answered May 29 '18 at 19:25

6

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

.btn-dark:hover {
  color: white;
}

answered May 29 '18 at 19:25

FlySpaceAge

95
10

score 5 · Accepted Answer · answered May 29 '18 at 19:30

<!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/

score 2 · Answer 3 · answered May 29 '18 at 19:26

2

You also need to override hover in the styling.

.btn-dark: hover {
    //Your style
}

answered May 29 '18 at 19:26

iNovelletto

207
2
4

Franklin Pious · Answer 4 · 2018-05-29T19:31:40.093

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>

score 0 · Answer 5 · answered Nov 17 '20 at 14:49

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

How to remove hover effect from Bootstrap button?

5 Answers5

Linked