Squarespace: how to use css with button IDs

Need to sharpen up your web design skills by getting involved with a community of creatives? Great news! We are launching our new Pixelhaze Community on Skool.
You can join our waitlist here to find out more: community.pixe... This video will show you how to use CSS with button IDs in Squarespace. By finding each of the 3 button IDs (primary, secondary....), you can easily create custom button designs in Squarespace.
If you want to create custom button designs in Squarespace, this video is for you! We'll show you how to use css with button IDs to create custom gradient button designs that fit your theme perfectly. By the end of this video, you'll have learned how to use the Squarespace CSS editor to create custom button designs that will look great on your website!
Here's the code:
/* Button Styles - Primary */
.sqs-button-element--primary {
background-image: linear-gradient(92.88deg, #CD2100 9.16%, #cc0000 43.89%, #d3132f 64.72%);
color: #FFFFFF !important;
flex-shrink: 0;
text-shadow: rgba(0, 0, 0, 0.35) 0 3px 8px !important;
transition: all .5s;
}
.sqs-button-element--primary:hover {
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 30px;
transition-duration: .1s;
}
Here's an example using a Squarespace block identifier (chrome plugin) to access an individual block. Please note this ID will be different on your Squarespace website:
#block-2cca316b118e59d7f612 .sqs-button-element--primary:hover {
box-shadow: rgba(0, 0, 0, 0.0) 0 1px 30px;
}
If you want to find out more about Squarespace, Canva and other techniques used by leading creative agencies, simply subscribe to this channel and hit the notification bell.
-----
GET A 20% DISCOUNT ON YOUR FIRST ANNUAL/MONTHLY SQUARESPACE PLAN!
Just follow the steps below:
1. Create a free trial in Squarespace by following the link below: squarespacecir...
2. When subscribing to your first plan, use our voucher code to get a 20% discount on your first month/year plan: PixelHaze20
-----------
COMPREHENSIVE ONLINE SQUARESPACE COURSE:
Squarespace Box of Tricks Course by PixelHaze Academy: campus.pixelha...
PROFESSIONAL DESIGN & SUPPORT
If you need additional help to get your Squarespace website up and running, reach out at: pixelhaze.studio
TOP-CLASS SQUARESPACE TEMPLATES AND SQUARESPACE PLUGINS
Don't reinvent the wheel, purchase one of our templates or a range of plugins to speed up your web design process: pixelhaze.store
----------
WHAT IS SQUARESPACE
Squarespace is an all-in-one website builder that includes personal, business and e-commerce hosting plans, e-commerce services for selling online and a domain service.
It is an excellent tool for bloggers, businesses, and a great starting point for graphic designers who are looking to get to grips with web design for the first time.
The standout feature with Squarespace is the growing collection of beautifully designed website templates suitable for businesses in any sector, from photography studios to restaurants and even manufacturing plants. Squarespace is a website management system that allows for real-time updates and one that works responsively across all web platforms and from mobile devices to large screen displays.
-----------
Affiliate notice: We are affiliate partners with Squarespace and may receive remuneration for any purchases via the links on this page.

[@feliciabarlow3696]

I'm thoroughly enjoying this video

[@annemacomber9736]

I love everything about this video!

[@isabellescott7493]

I'm impressed with the video.

[@caitlinwebb8464]

Wow, I learned so much from that video!

[@samuelcosey7676]

I'm really glad I watched this video

[@normaneaton9878]

I can't stop watching this video

[@ashleyskinner5311]

Dude this was way too helpful and informative!

[@vallieschmidt4639]

Man, this video helped me how to change the button style from primary to secondary.

[@rebeccacarlisle2665]

This video helped me how to edit button styles in Squarespace.

[@liliansmith1499]

This video provides a detailed guide to editing button styles in Squarespace.! Great work

[@jasperziemann6790]

it's been incredibly informative!

[@mariatellez6889]

This video is outstanding in every way.

[@tuhinhossain4341]

❤❤❤

[@danicanicholson5058]

There is a subtle drop shadow behind the button text.

[@gladyssigler1918]

The drop shadow is more obvious on the text on a white background.

[@dalesalazar3831]

The width and height of the button can also be adjusted.

[@rayleepratt6249]

The current button style is a primary button in Squarespace.

[@jodierowe3640]

The button can be changed from a square to a gradient with or without fill.

[@miguelhurst559]

After copying the block, they paste it into the style editor to make changes to the code.

[@ismrgrey]

Hi i have multiple buttons and need to run different script on each how do i do thta without having to add the code block? i tried that but the button just doest look same as what i already have so preferably ill just add the run script to tho button individually.

[@delilahgriffiths9639]

There is currently no option to add a button type like a gradient.

[@joshperry3205]

The primary button style is currently being displayed but can be changed to secondary or tertiary.

[@delladach7045]

I hope that they won't need to change anything else while copying and pasting the element they want to change.

[@dianekern1040]

I'm really glad I watched this video

[@teresamiller1918]

it's been incredibly informative!

[@mirahopper9479]

I'm thoroughly enjoying this video