CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Rheo
Rheo

Reputation: 165

How to remove hover effect from Bootstrap button?

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>

Upvotes: 12

Views: 70206

Answers (8)

Raj
Raj

Reputation: 81

The problem with overriding the styles for :hover is that you are messing with the order of precedence 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);
}

Upvotes: 0

soiswis
soiswis

Reputation: 71

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

Upvotes: 5

new guy
new guy

Reputation: 49

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

Upvotes: 4

sinfella
sinfella

Reputation: 286

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

Upvotes: 0

Franklin Pious
Franklin Pious

Reputation: 3848

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>

Upvotes: 1

Nikhil
Nikhil

Reputation: 3950

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

Upvotes: 6

iNovelletto
iNovelletto

Reputation: 237

You also need to override hover in the styling.

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

Upvotes: 2

FlySpaceAge
FlySpaceAge

Reputation: 95

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

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

Upvotes: 6

Related Questions