Jump to content

Use multiple button styles

Recommended Posts

I'm creating a new site on 7.1 and I'd like to use slightly a different style of button for small buttons to medium/large.

I'd like to use solid style for medium and large buttons and outline style for small. But I can't see a way to change one without updating all button styles under Design > Buttons. 

Any ideas? 

Screen Shot 2020-02-05 at 2.08.46 pm.png

Link to comment
  • Replies 5
  • Views 2.7k
  • Created
  • Last Reply
22 hours ago, tuanphan said:

You can use CSS for this.

If you can insert 2 medium & large buttons, then share link to these. I can take a look

(I don't remember code for both buttons, so I need to insert buttons first to check code)

Thanks tuanphan. I was hoping there was a way to do this without CSS since you could have different style buttons in 7.0

Link to comment
  • 2 months later...
  • 4 weeks later...
On 4/21/2020 at 5:27 AM, YolBungaloo8 said:

hi @bekandco did you manage to solve this? Im trying to do one outlined button and one solid one.. but no luck 

Hi @YolBungaloo8 - apologies I didn't see your message until now. I ended up using CSS for this.

This is what I used: 

/* Small Button Styling */
.sqs-block-button-element--small {  border: 3px solid #84cfcb !important;;
  background-color: #ffffff !important;;
  color: #84cfcb !important;

It's on this website: https://www.bekandco.com.au/ 

My large and medium buttons are set to be a solid colour and the CSS changes the small buttons to have a boarder and colour in the middle. 

I hope that helps 🙂

Link to comment


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.