Jump to content

SOMEONE PLEASE HELP - Custom Button Questions

Recommended Posts

have almost everything set for the coding. After hours of searching, I still need help with a few CSS custom codes. Website: https://www.magiclandharrison.squarespace.com password: Harrison

I've been able to change most of the buttons with this starting code:

.sqs-block-button-element {

 

However, I still have a few areas I need coding help:

  • Change the contact form button, newsletter form button, and acuity scheduling (embedded code) button too?
  • Change the FONT of the Header button text to Patrick Hand SC
  • Change Scheduling Embedded BUTTON to an image
  • Change ALL Embedded scheduling buttons to a background-image URL(
  • Change the size/padding of the main navigation button to make it a little larger area for the button
  • Make the custom button & text properly adjust to screen sizes (tablet, phone, desktop)?

Thanks

Image 3-6-23 at 11.26 AM (1).jpeg

Image 3-6-23 at 11.26 AM.jpeg

Link to comment
  • Replies 1
  • Views 342
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

With header button, use this CSS

header#header a.btn {
    font-family: 'Patrick Hand SC' !important;
}

With newsletter button, use this code

div.newsletter-block button.newsletter-form-button.sqs-system-button {
    background-image: url(https://static1.squarespace.com/static/63f63f087faed7328848a0f9/t/640604e1ee27f958f19587f3/1678116065166/Button+Color+%283%29.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent !important;
}
div.newsletter-block button.newsletter-form-button.sqs-system-button span {
    color: #96c1c0;
}

image.png.f1ffdcda260740661928f7cd84b54a57.png

With Form button, use this code

div.form-block input.button {
    background-image: url(https://static1.squarespace.com/static/63f63f087faed7328848a0f9/t/640604e1ee27f958f19587f3/1678116065166/Button+Color+%283%29.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: transparent !important;
    color: #96c1c0 !important;
}

image.png.0778cae9c09030c1dc0b21a8c8f92876.png

Where is acuity scheduling?

 

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.