Hey there, I'm pretty new to React and currently exploring styled components for the CSS styling of my components. One of the components I've created is a button called SummonButton:
const SummonButton = styled.button`
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
font-size: 1.5em;
:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
:active {
color: #000
}
:active:after {
background: transparent;
}
:hover:before {
opacity: 1;
}
:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
Now, I want to limit this SummonButton so that it stops functioning after being clicked ten times. To achieve this, I added the following line of code:
<SummonButton onClick={summonAble < 10 ? SummonAction : {backgroundColor: "red"}}>Summon</SummonButton>
The summonAble state increments by one every time SummonAction is triggered. Once the count reaches 10, I'd like to change the background color of the button to red. Any ideas on how I can accomplish this?