No está demás decir que reemplazar directamente el texto como tal, no se puede con CSS, por eso se utilizan estrategias con :before
y :after
para emular este comportamiento.
Complementando la respuesta de Mateo, otra táctica es envolver el texto original del botón en un span
, y ocultar (con display:none
) tal texto al "hacer hover" en el botón.
Cabe mencionar que aquí se le agregó un width al botón para que se active el hover al posicionar el puntero del mouse en cualquier parte del botón, no solo al inicio de este.
.btn {
width: 10em;
}
.btn:hover {
background-color: greenyellow;
color: white;
}
.btn:hover span {
display: none;
}
.btn:hover::after {
content: 'Hecho!';
}
<button class="btn">
<span>Pasa por encima</span>
</button>
Artilugios hay varios...