My app features two buttons that serve similar functions on different pages. One button directs users to the search page, while the other takes them back to the home page.
The challenge I'm facing is that I need the background image for each button to be unique without duplicating the rest of the styling. How can I either inherit or override the background-image property?
I attempted the following code, but it doesn't seem to work as the button for ".return-home" is not rendered:
Link:
<Link
to='/'
className="return-home">
</Link>
App.css
.open-search, .return-home a {
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background: #2e7d32;
background-image: url('./icons/add.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
font-size: 0;
}
.return-home a {
background-image: url('./icons/arrow-back.svg');
}