Change the shape of buttons to a custom button

TimMarner · July 2

Hello,

Can anyone help me with changing the button shapes...

I am trying to get the buttons to look like a pipe. Maybe just adding a stroke at the corners?? I'm not sure how to do it.

I want it to look like the brand mark (but not the cross shape) just the rectangle shape that's been outlined

Website: https://doctorflow.squarespace.com

Password: doctorflow

Thank you for any help 🙂

MayaViolet · July 2

Hi @TimMarner - you can try assigning a background image to a button by uploading your brand mark to the CSS panel as a file, and then assigning it with css. It will definitely take tweaking the following properties to get it to apply correctly, but this should be a good starting point:

.sqs-button-element--primary {
   padding:  !important;
  border: 0px !important;
    background-color: transparent !important;
  background-image: url("REPLACE URL HERE");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 75px 75px;
  height: 50px; 
  width: 150px;
  font-display: none;
  color: transparent !important;
  -webkit-transition: 3s;
  transition: 3s;
}

TimMarner · July 3

Hi, thanks for your help

I've added the code in with my image but yes it looks like it still needs some adjusting

MayaViolet · July 3

6 hours ago, TimMarner said:

Hi, thanks for your help

I've added the code in with my image but yes it looks like it still needs some adjusting

Hi Tim- try adjusting the code to remove the "font-display" and "color" properties, and then add in these properties to fix alignment:

    justify-content: center;
    align-items: center;
    display: inline-flex !important;

Lmk if that works!

TimMarner · July 8

This looks much better thank you!

Is there a way I can do this but for the white buttons too? I can upload my white button image but I think I would need to target only the bright backgrounds? (like the the navigation bar)

Thanks for the help 🙂

TimMarner · July 8

I have figured out how to change the colour on different themes but I've noticed there is space around the button when its left-aligned

Do you think you could help with this please?

tuanphan · July 13

On 7/8/2024 at 6:07 PM, TimMarner said:

I have figured out how to change the colour on different themes but I've noticed there is space around the button when its left-aligned

Do you think you could help with this please?

I think the button is fine. If you still have problem, can you take a screenshot?

Change the shape of buttons to a custom button

Recommended Posts

TimMarner

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

MayaViolet

MayaViolet

Posted Images

MayaViolet

TimMarner

MayaViolet

TimMarner

TimMarner

tuanphan

Create an account or sign in to comment

News

MayaViolet

MayaViolet

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources