How to remove hover effect from Bootstrap button?
<!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/
How to disable hover effect on bootstrap custom button?
I'm having a hard time determining the effect exactly, but you could always use pointer-events
.
.btn-circle {
pointer-events: none;
display: inline-block; /* For added support */
}
Links:
- CanIUse.com
- W3Schools
How can I remove a bootstrap buttons hover effect?
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;
}
How to disable Bootstraps button checkbox hover and focus effect?
If my understanding is correct is this what you need?
label.btn.btn-outline-secondary { color: #6c757d; background-color: transparent; outline: none !important; box-shadow: none !important;}
label.btn.btn-outline-secondary.active { color: #fff; background-color: #6c757d;}
<!doctype html><html lang="en">
<head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title></head>
<body> <h1>Hello, world!</h1>
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-secondary active"> <input type="checkbox" name="a" value="0"> SomeText1 </label> <label class="btn btn-outline-secondary active"> <input type="checkbox" name="a" value="1"> SomeText2 </label> </div>
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script></body>
</html>
How to remove transition effect from Bootstrap button?
Just add !important to overrule, i also added the hover part, wasnt clear to me you needed that specificly.
(also to explain: bootstrap has a lot of build-in classes that use specific constructions like button.btn which will overrule the standard .btn class because it's more specific , so using !important will make sure it overrules the class in your case.)
.btn { border-radius: 0; width: 12.313rem; padding: 1rem 0.8rem; color:#000!important; transition: none!important; &-outline-dark { color: #000000; border-color: #000000; transition: none!important;
}}.btn:hover { background-color:#fff!important; color:#000!important;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<button type="button" class="btn btn-outline-dark">NOW</button>
Bootstrap disable hover behaviour
Heres how I ended up doing it, it disables all effects (for different color variants, you will have to do them individually):
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-primary:active:focus:not(:disabled):not(.disabled),
.btn:focus, .btn:active, .btn:hover{
box-shadow: none!important;
outline: 0;
background-color:transparent;
color:var(--bs-primary);
}
Remove hover background dropdown bootstrap 4
easiest way to do this is take a new class inside drop down-menu and apply css
check this fiddle, updated fiddle https://jsfiddle.net/rb87gwzj/4/ or this snippet
.dropdown-menu{ background-color: transparent; border: transparent; border: none;}.dropdown-menu .dropdown-item > li > a:hover { background-image: none; background-color: #000!important;}
.navbar { background: none;}.dropdown-content a:hover { background-color: transparent;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="index.html"> <img src="images/logo.png" width="30" height="30" class="d-inline-block align-top" alt=""> </a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item active dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Projects </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" > <div class="dropdown-content"> <a class="dropdown-item" href="#html">HTML5/CSS</a> <a class="dropdown-item" href="#python">Python</a> <a class="dropdown-item" href="#php">PHP</a> <a class="dropdown-item" href="#java">Java</a> <a class="dropdown-item" href="#csharp">C#</a> </div> </div> </li> </ul> </div></nav>
Related Topics
Why Don't Flex Items Shrink Past Content Size
What Are Valid Values For the Id Attribute in Html
How to Vertically Center a Div Element For All Browsers Using Css
How to Vertically Align Elements in a Div
Image Inside Div Has Extra Space Below the Image
How to Center Text (Horizontally and Vertically) Inside a Div Block
Make a Div Fill the Height of the Remaining Screen Space
Maintain the Aspect Ratio of a Div With Css
How to Vertically Center Text With Css
Why Not Use Tables For Layout in Html
Center One and Right/Left Align Other Flexbox Element
How to Center an Element Horizontally and Vertically
What to Do Regular Expression Pattern Doesn't Match Anywhere in String
Css Margin Terror; Margin Adds Space Outside Parent Element
How to Give Text or an Image a Transparent Background Using Css