Jump to content

Buttons look different in Safari?

Recommended Posts

Site URL: https://www.alexandra-lyon.com

Hi! Seeking help with this, any insight is so appreciated! Just noticed the buttons on my clients site look different on Safari and Chrome.

On Chrome they show up like this:

https://www.alexandra-lyon.com/

205119023_ScreenShot2021-11-22at6_08_16PM.png.61042fc6a82bf518971c6e81f54b8af3.png

 

https://www.alexandra-lyon.com/course

 

1275842736_ScreenShot2021-11-22at6_08_31PM.png.bae7298b9f96df31c0659827aaa901a8.png

 

 

But on Safari they show up like this:

https://www.alexandra-lyon.com/

138122656_ScreenShot2021-11-22at6_10_54PM.png.31047859bd5554c26f61059b1d3bd18d.png

 

https://www.alexandra-lyon.com/course

2122504965_ScreenShot2021-11-22at6_11_06PM.png.1a05bb647858069c47e7a1949702058d.png

This is the code I used to further customize the site styles:

//Button outline//
.primary-button-style-outline .sqs-block-button-element--small, .primary-button-style-outline .sqs-block-button-element--medium, .primary-button-style-outline .sqs-block-button-element--large, .primary-button-style-outline .image-button a, .primary-button-style-outline .newsletter-form-button, .primary-button-style-outline .list-item-content__button {
  border-width: 1px;
  border-style: solid;
}

.primary-button-style-outline .dark .sqs-block-form .sqs-editable-button {
  background: transparent!important;
  color: #ffffff!important;
  border-color: #ffffff!important;
  font-family: ss-pro!important;
  font-weight: 600!important;
  font-style: normal!important;
  text-transform: uppercase!important;
  line-height: 1.2em!important;
  letter-spacing: .25em!important;
  font-size: .8rem!important;
}

.primary-button-style-outline .dark .sqs-block-form .sqs-editable-button:hover {
  background: #ffffff!important;
  color: #888!important;
  border-color: #ffffff!important;
}

Any help is so appreciated, thank you!!

Edited by GretchenElizabeth
added URL, code
Link to comment
  • 3 weeks later...

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.