leedbssk Posted March 2 Share Posted March 2 Hi, How can I change the colours of the buttons on the header and Slideshow banner on HOVER? It's currently all white, but I need the text colour to be #495A58. (attached screenshot). For more information, I used this code .page-section:nth-child(1) {padding-top:0!important} to make the header transparent after searching. As this function wasn't available on slideshow banner. Can I please get custom codes for this? Thank you. Link to comment
WCS Posted March 2 Share Posted March 2 @leedbssk Happy to help! Here's code for modifying the header button: // This creates a small transition buffer .header-actions-action--cta .theme-btn--primary-inverse{ transition: transform 0.3s !important} // Change the specified colors .header-actions-action--cta .theme-btn--primary-inverse:hover { opacity: 1 !important; background-color: red! important; color: #495A58} ^ I don't know what color you want the background to be. If you don't want it to change, then you can remove that part of the CSS. For the slideshow button, can you please share a link to your site? leedbssk 1 Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
leedbssk Posted March 3 Author Share Posted March 3 Hi @WCS, Thanks very much for your help! I successfully changed the colour of the button on hover at the header. Here is the link to the website: https://apremedialmassage.com.au/ Could you please help me changing the slideshow button colour on hover as well? On hover, I want the button to be white background and text colour to #495A58. Thank you so much! Link to comment
WCS Posted March 4 Share Posted March 4 (edited) @leedbssk Perfect! Thank you for sharing the link. Try adding this: .list-item-content__button .sqs-button-element--primary:hover{ color: #495A58} Edited March 4 by WCS Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
leedbssk Posted March 5 Author Share Posted March 5 13 hours ago, WCS said: @leedbssk Perfect! Thank you for sharing the link. Try adding this: .list-item-content__button .sqs-button-element--primary:hover{ color: #495A58} Hi @WCS, Thank you so much for your help. Unfortunately this line of code didn't do anything to the buttom. Is it because the button is located at the slideshow banner? There are two banners in the slideshow. Could you please help me again? Have attached the screenshot for your reference to see the location of the banner. And the code i've added. Link to comment
WCS Posted March 6 Share Posted March 6 @leedbssk Ah, I see what you mean. Is this on 7.0 and if so, what template are you using? Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
leedbssk Posted March 17 Author Share Posted March 17 Hi @WCS, thanks for your reply. I am using version 7.1 and I didn't use any template. Thanks! Link to comment
Solution tuanphan Posted March 19 Solution Share Posted March 19 Don't remove any code in your current code. Use this CSS code to change button text on hover a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary:hover { color: #495A58 !important; } leedbssk 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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