Jump to content

How to code in a colour for linked text that is used as a button

Recommended Posts

I want to change my button style, but seemingly Squarespace won't let me change it the way I want to - ie, just have a coloured text link.

I can put in the text and link it, ofcourse, but the colour is extra to my five and needs coding in. I probably won't have the icon in my image attached, thats just in my Figma file.

I have the block identifier, but the text block comes up as a block yui. Can anyone help me with the code needed to make this happen? I realise I'll have to code in for every link. But I don't want to upgrade to code injection - isn't that a more expensive package?

Of if you have any other ideas about how to make this coloured text link the button style.

The coloured button box with rollover is rather dated now, isn't it?

Also - if I try to use the underlined text option in the button styles, I can't change the font to ordinary sentence capitalisation - argh!

Its either all caps, or all lower case. They seem to dictate what you can have so much. There isn't the flexibility here that you'd hope for as a designer.

Text link as button.png

Link to comment
  • Replies 5
  • Views 687
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Hey @DianeEliz,  you've got a few options here. All code provided would go in the Custom CSS area, so is compatible with the Personal Plan.

1) Use the Site Styles menu to change the color of links within text.

2) Target all links within text blocks with this CSS

#siteWrapper p a {
  color: green;
}

3) Target specific Block ID's

#siteWrapper #block-id a {
  color: green;
}

4) Use a Tertiary Style button with background fill and use below CSS

#siteWrapper .sqs-button-element--tertiary {
  background: none;
  color: green;
}

 

Edited by abibacon

Squarespace Developer based in Hampshire, England

If you'd like to make a contribution for my time you can Buy Me A Coffee.

Link to comment

I just started another conversation because this I can't seem to find the Custom CSS window anymore. I used the new AI Tools to make a new template...
It moved to Settings, but in this tool its not there or in the Developer Tools. 

I'll try your code, thank you and I'll get you a coffee. I'll try the general link style code if I can find the Custom Code section. It looks like I might have to rebuild the site on the older route to find it! Can't they stop moving things! I hope they aren't going to get rid of Custom CSS.

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.