The text on the button (Remove in this case) will only show up when the mouse is hovered over it. This issue is occurring in an angular project and despite trying to apply CSS for .btn, it does not get overridden.
background-color: blue;
| Button's text not visible | Button's text visible only when hovered over with mouse |
|---|---|
| https://i.sstatic.net/Yw4rX.png | https://i.sstatic.net/s6KMy.png |
This is the HTML code for the button :
<button (click)="remove(item)" class="btn btn-primary btn-sm mt-2" style="color: white;">Remove</button>
Below 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;
}