Jump to content

button is a different colour to my sites colour scheme

Recommended Posts

  • Replies 5
  • Views 562
  • Created
  • Last Reply
2 hours ago, tuanphan said:

You can add this to Design > Custom CSS


/* Home store button */
body.homepage .sqs-block-button-element[href="/store"] {
    color: darkgrey;
}

 

this only changed the font colour,  i'd like the button even the frame to be the grey then when you hover it inverts like on the /about page with the delivery and return button. this is the colour code i found in the inspect element

#434446;

Link to comment
30 minutes ago, yasminva said:

this only changed the font colour,  i'd like the button even the frame to be the grey then when you hover it inverts like on the /about page with the delivery and return button. this is the colour code i found in the inspect element

#434446;

so i managed to find this in the inspect element

Quote

.primary-button-style-outline .black .sqs-block-button-element--small, .primary-button-style-outline .black .sqs-block-button-element--medium, .primary-button-style-outline .black .sqs-block-button-element--large, .primary-button-style-outline .black .header-actions .btn {
    color: #434446;
    border-color: #434446;
    background: transparent;
}

and i changed the colours and its worked but im not sure how to make the button invert when you hover over it. id like the button to turn to the grey colour and the font to be white like this:

 

Screen Shot 2021-03-12 at 12.31.43.png

Link to comment
30 minutes ago, yasminva said:

so i managed to find this in the inspect element

and i changed the colours and its worked but im not sure how to make the button invert when you hover over it. id like the button to turn to the grey colour and the font to be white like this:

 

Screen Shot 2021-03-12 at 12.31.43.png

Add this to Design > Custom CSS

/* Home store button */
div#block-fa7828037c3feecb0451 a[href="/store"] {
    color: #434446;
    border-color: #434446;
}
div#block-fa7828037c3feecb0451 a[href="/store"]:hover {
    background: #434446;
    color: white;
}

 

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

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.