CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Karlom
Karlom

Reputation: 14834

How to disable hover effect on bootstrap custom button?

I am using bootstrap 3 and this is probably a stupid problem, but I can not disable hover effect on fa-chart-line icon here:

<h5>
  <span class="btn btn-circle blue1-icon"> 
    <i class="fas fa-chart-line"></i>
  </span> My Title
</h5>

CSS:

.blue1-icon {
  background-color: #019993;
  color: #fff;
}

.blue1-icon:hover {
  text-decoration: none;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}


.btn-circle:hover {
  cursor: default;
  text-decoration: none !important;  
 }


.fa-chart-line:hover  {
  text-decoration: none !important;
}

How can I fix this?

Upvotes: 3

Views: 9017

Answers (3)

squarespiral
squarespiral

Reputation: 267

In bootstrap4 according to the documentation you simply add disabled to a button tag (not the css class), like so:

<h5>
  <button class="btn btn-circle blue1-icon" disabled> 
    <i class="fas fa-chart-line"></i>
  </button> My Title
</h5>

At least, this is how it works for buttons.

Hope this is helpful and not too far off-topic (using button instead of span and bootstrap4 instead of 3).

Upvotes: 1

Chris Happy
Chris Happy

Reputation: 7295

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:

Upvotes: 6

Ishwar Patil
Ishwar Patil

Reputation: 1736

Check this.

You need to set color of .btn to white on hover. I have added !important only for demo purposes. Ideally, if you load your css after bootstrap css, you no need to provide !important.

Also, no need of text-decoration which you have used in your code.

.blue1-icon {
  background-color: #019993;
  color: #fff;
}

.blue1-icon:hover {
  text-decoration: none;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}


.btn:hover {
  cursor: default;
  color: white !important;
 }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h5>
       <span class="btn btn-circle blue1-icon"> 
            <i class="fa fa-line-chart" aria-hidden="true"></i>
      </span> My Title
   </h5>

Upvotes: 1

Related Questions