Need help with creating a versatile Button component in React that can easily accommodate different sizes and shapes of background images?
This is how my current implementation looks like -
Button.js
const Button = ({ url }) => {
const inlineStyle = {
backgroundImage: `url(${url})`
}
return (
<button
type='submit'
style={inlineStyle}
className='button'
/>
)
}
Button.css
.button {
width: 100%;
padding: 30px 0;
border: none;
background-color: rgba(0, 0, 0, 0);
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
However, this setup might not work well for all button sizes. To handle diverse dimensions, you can modify the Button component like so -
const Button = ({ url, modifierClass }) => {
const inlineStyle = {
backgroundImage: `url(${url})`
}
return (
<button
type='submit'
style={inlineStyle}
className={`button ${modifierClass}`}
/>
)
}
.modifier {
max-width: 300px;
}
For narrower buttons:
.modifier {
max-width: 140px;
}
My main concern is devising a solution to make the Button component and its CSS adaptable for all types of background image button shapes and fixed sizes. Any suggestions on how to achieve this?