0
239
VistasEl texto del botón solo es visible cuando se pasa el mouse sobre él
El texto en el botón (Eliminar en este caso) solo es visible cuando se pasa el mouse sobre él. Es un proyecto angular y no se anulará incluso si intento dar css para .btn como
background-color: blue;| El texto del botón no se ve | El texto del botón es visible solo cuando se pasa el mouse sobre él |
|---|---|
 |  |
Este es mi código html para el botón:
<button (click)="remove(item)" class="btn btn-primary btn-sm mt-2" style="color: white;">Remove</button>Este es el css para los botones en 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 Respuestas
Responde la pregunta0
Tiene btn-primary en su etiqueta de botón html como clase, pero en su css es primary-btn , por lo que en realidad su css no debería hacer nada para resolver su problema.
En cuanto a por qué su texto no se muestra, por lo que puedo ver, ha coloreado el texto como blanco, mientras que el botón también es blanco, por lo que el texto debería mostrarse, es más un problema de su color de fondo.
La solución más fácil sería:
<button (click)="remove(item)" class="btn btn-primary btn-sm mt-2" style="color: white; background-color: blue;">Remove</button>0
Tuve un problema similar cuando el botón estaba dentro de una mesa. Las clases de arranque para la tabla interferían con las clases de arranque del botón.
Coloque el botón dentro <thead></thead> o <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>