ellen_b Posted June 20 Share Posted June 20 Hi, I have added CSS to my site so that my secondary button (used here in my header) turns yellow on hover. However, the text is now turning white on hover rather than staying black. I've tried this code to keep it black on hover with no luck. .sqs-button-element--secondary:hover { background-color: #F6FAA0 !important; font-color: black !important; } If anyone has advice on how to maintain the black on hover, I'd really appreciate it! Link to comment
Lesum Posted June 20 Share Posted June 20 @ellenbrown Hi! Replace your previous code with the following: #header .header-actions-action .sqs-button-element--secondary:hover { background-color: #F6FAA0 !important; color: black !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted June 20 Author Share Posted June 20 @Lesum Success! Thanks so much. I actually would like this styling for all secondary buttons, not just in the header. Do I just remove the #header part? Link to comment
Solution Lesum Posted June 20 Solution Share Posted June 20 @ellenbrown Add this code for all secondary buttons: #siteWrapper.site-wrapper .sqs-button-element--secondary { background-color: #F6FAA0 !important; color: black !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment