I have a div with a background image and inside that div, there is a component called Hero. I want to add a simple hover effect on a div with a className newBigButton. However, the transition is laggy when the background image is present. Here's the code:
<div
className="hero-section"
style={{
flex: 1,
display: "flex",
backgroundImage: bg ? `url(${bg})` : "",
backgroundPosition: " 60% center",
}}
>
<Hero />
</div>
Part of the Hero component code:
<div style={{marginTop: "15vh"}} className="d-flex w-100 flex-column justify-content-center align-items-center">
<div style={{gap: "20vh"}} className="d-flex ">
<div className={styles.newBigButton}>BESOIN IMMÉDIAT</div>
<div className={styles.newBigButton}>PROJET À VENIR</div>
</div>
<div style={{marginTop: "8vh"}} className={styles.newBlueButton}>Demander une démo</div>
</div>
The CSS for New Big Button:
.newBigButton {
color: #2863a9;
background-color: #fff;
border-radius: 10px;
border: 2px solid #2863a9;
padding: 3.5vh 2vh;
font-weight: 800;
cursor: pointer;
transition: 0.1s linear;
}
.newBigButton:hover{
background-color: #2863a9;
color: #fff;
}