Hi, I am new to sparkle and need help with Button Hover color opacity change effect.
I have created a button with purple background with 100% opacity. Now I want just the opacity of the same color to reduce to 50% when I hover over the button.
How can I make this effect possible ?? What I have noticed is that the color panel is common for different elements ( like two boxes put side by side ). If I set red color with opacity of 20% for one box, the color panel shows the same color with opacity of 20% for other box also. What if I want to set the red color opacity to 40% for the second box ??
Same thing is happening with the color hover effect also for the button. I can’t change the opacity of the same color to 50% on button hover. If I change the opacity to 50%, it changes the background color opacity to 50% for the normal state of the button as well.
You should use one of the unused colours in the palette and set it up for the colour and opacity you want for your hover effect. If you change any of the colours already used in your project, all objects that use that colour will change also. Basically, a website shouldn’t need more than 7 colours (main colours) therefore, use one or two of the wireframe or neutral colours in the palette to create lighter or translucent shades of any main colours that may be required. Remember, you will only be changing colours in your current project. When starting new projects, you will still see Sparkle’s default palette.
