Button text only visible when hovered over with mouse

user_11750302 0
Viewed 439

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;
}
bootstrap-5 angular css html
2 Answers

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>
user_70677400

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>
user_111603520
Related