Tengo varios botones con forma de corazón y me gustaría que al hacer click sobre ellos cambiaran de color a rojo. Tal y como lo tengo ahora mismo solo me sale el fondo rojo cuando hago click, pero no sale en forma de corazón. Ya he probado con el código de otras preguntas pero no me funciona.
Este es el código que tengo:
return <div className="text-center mt-5">
<h1>Planetas</h1>
<div className="row flex-nowrap overflow-scroll">
{store.planetas.map((planeta, id) => {
return (
<div key={id}>
<div className="col">
<div className="card custom-card" style={{ width: "18rem" }}>
<img src="https://images.milenio.com/wHfUPkc60fR3N98MP9F2Wj1Zs2c=/936x566/uploads/media/2018/05/04/existen-en-el-universo-planetas.jpg" className="card-img-top"></img>
<div className="card-body">
<h5 className="card-title">{planeta.name}</h5>
<Link className="btn btn-primary" to={`/planeta/${id}`}>
{planeta.name}
</Link>
<button className="heart-button" onClick={() => actions.agregarFavoritos(planeta.name)}><svg xmlns="http://www.w3.org/2000/svg" className="heart" width="28" height="28" viewBox="0 0 24 24" strokeWidth="1.5" stroke="#000000" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg></button>
</div>
</div>
</div>
</div>
);
})}
;
</div>
</div>
};
export default Planeta;
(estos botones están asociados a un botón de favoritos)
El CSS:
.heart-button {
display: inline-block;
border: none;
background: none;
display: inline-block;
text-align:center;
margin-left: 5px;
}
.heart-button:active {
background-color: red;
}