'Button text only visible when hovered over with mouse

The text on the button (Remove in this case) is only visible when hovered over with mouse. It's an angular project and it won't get overridden even if I try to give css for .btn as

background-color: blue;
Button's text not visible Button's text visible only when hovered over with mouse
enter image description here enter image description here

This is my html code for the button :

<button (click)="remove(item)" class="btn btn-primary btn-sm mt-2" style="color: white;">Remove</button>

This is the css for buttons in style.css :

 .btn-info{
    color:#fff;
    background-color:#0da8e4!important;
    border-color:#0da8e4!important
}

a.primary-btn{
    background:#05143f;
    padding:7px 20px;
    text-align:center;
    display:inline-block;
    color:#fff;
    border-radius:2px;
    font-size:14px;
    margin-top:5px
}
a.primary-btn:hover{
    background:#0da8e4;
    color:#fff
}

.active-link {
  font-weight: bold;
}
htmlcssangularbootstrap-5


Solution 1:[1]

I had a similar issue when the button was inside a table. Bootstrap classes for the table were interfering with the button bootstrap classes.

Please put the button inside <thead></thead> or <tbody></tbody>

<table class="table table-hover" style="cursor:pointer">
  <thead>
    <tr>
      <th style="width: 20%;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <button (click)="remove(item)" class="btn btn-primary">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

Solution 2:[2]

You have btn-primary on your html button tag as class, but in your css its primary-btn, so actually your css should do nothing to solve your problem.

As to why your text doesnt show, from what I can see, you have colored the text as white, while the button is also white, so the text should be showing, its more a problem of your background color.

Easiest solution would be :

<button (click)="remove(item)" class="btn btn-primary btn-sm mt-2" style="color: white; background-color: blue;">Remove</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sampath
Solution 2 Caliph Hamid

Related Questions