0
237
ViewsButton 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 |
|---|---|
 |
 |
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;
}
2 answers
Answer question0
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>
0
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>