Jump to content

How to change colours of the buttons on hover

Go to solution Solved by tuanphan,

Recommended Posts

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.

Screenshot 2024-03-03 at 12.58.37 am.jpg

Link to comment

@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?

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

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

@leedbssk Perfect! Thank you for sharing the link. Try adding this:

.list-item-content__button .sqs-button-element--primary:hover{
color: #495A58}

Edited by WCS

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment
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.

Screenshot 2024-03-05 at 6.33.27 pm.png

Screenshot 2024-03-05 at 6.35.09 pm.png

Link to comment
  • 2 weeks later...
  • Solution

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;
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.