How to create a button with code?

Site URL: https://projectsinsider.squarespace.com/

Hi all,

I'm trying to get some coding to work with a pop up button from Typeform.

For some reason, they have been unable to supply the code so I am hoping I have some luck here.

Website - https://projectsinsider.squarespace.com/

Pass - lifeisgood

Page - https://projectsinsider.squarespace.com/real-estate-melbourne/typeform

Script:

<script src="//embed.typeform.com/next/embed.js"></script><center><a style="margin-top: 16px;border: 2px solid #ff8500;color: #ff8500;"><button data-tf-popup="lQlkhSSq" data-tf-hide-headers data-tf-hidden="urlsource=xxxxx,property=xxxxx,suburbofinterest=xxxxx" style="all:unset;font-family:;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:transparent;font-size:18px;border-radius:0px;color:#ff8500;padding:0 50px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Register Your Interest</button></a></center>

The code above is my attempt that has resulted in the image below using a code block.

Ideally it would be great to have the button look and behave exactly like my Squarespace buttons, image as seen below. Even better if somehow the code can be coded in such a way so that it references my Squarespace button settings/preferences and so if i do decide to change any styling in the future, all my buttons will automatically change accordingly whether its color or font or size.

Upon hovering over the button above, the text color becomes white and the button color becomes #ff8500. 

Appreciate any help.

Thanks in advance!

18 hours ago, Insider said:

Site URL: https://projectsinsider.squarespace.com/

Hi all,

I'm trying to get some coding to work with a pop up button from Typeform.

For some reason, they have been unable to supply the code so I am hoping I have some luck here.

Website - https://projectsinsider.squarespace.com/

Pass - lifeisgood

Page - https://projectsinsider.squarespace.com/real-estate-melbourne/typeform

Script:

<script src="//embed.typeform.com/next/embed.js"></script><center><a style="margin-top: 16px;border: 2px solid #ff8500;color: #ff8500;"><button data-tf-popup="lQlkhSSq" data-tf-hide-headers data-tf-hidden="urlsource=xxxxx,property=xxxxx,suburbofinterest=xxxxx" style="all:unset;font-family:;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:transparent;font-size:18px;border-radius:0px;color:#ff8500;padding:0 50px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Register Your Interest</button></a></center>

The code above is my attempt that has resulted in the image below using a code block.

 

I want that button to look exactly like my Squarespace buttons that looks like the below image:

Appreciate any help.

Thanks in advance!

 

@tuanphan think you could give this a go!? Please!

On 8/17/2021 at 8:48 AM, Insider said:

@tuanphan think you could give this a go!? Please!

You mean change typeform button hover color? Add thí CSS

/* Typeform button hover */
div#block-6ba409a9c30871186cdd a:hover {
    background: #ff8500;
}
div#block-6ba409a9c30871186cdd a:hover * {
    color: white !important;
}

On 8/18/2021 at 6:26 PM, tuanphan said:

You mean change typeform button hover color? Add thí CSS

/* Typeform button hover */
div#block-6ba409a9c30871186cdd a:hover {
    background: #ff8500;
}
div#block-6ba409a9c30871186cdd a:hover * {
    color: white !important;
}

 

Yes thank you! Exactly like that but so that it works for all coded Typeform buttons.

Is there a way?

On 8/20/2021 at 10:41 AM, Insider said:

Yes thank you! Exactly like that but so that it works for all coded Typeform buttons.

Is there a way?

https://projectsinsider.squarespace.com/real-estate-melbourne/typeform

The url doesn't exist

On 8/22/2021 at 4:54 PM, tuanphan said:

https://projectsinsider.squarespace.com/real-estate-melbourne/typeform

The url doesn't exist

Sorry please try this one:

https://projectsinsider.squarespace.com/real-estate-melbourne/661-chapel-661-chapel-street-south-yarra

pass:lifeisgood

I need the first button to look and behave like the second one.

These buttons will be used site wide across numerous pages and I need them all to be consistent.

Thanks @tuanphan!

On 8/22/2021 at 4:27 PM, Insider said:

 

Sorry please try this one:

https://projectsinsider.squarespace.com/real-estate-melbourne/661-chapel-661-chapel-street-south-yarra

pass:lifeisgood

I need the first button to look and behave like the second one.

These buttons will be used site wide across numerous pages and I need them all to be consistent.

 

Thanks @tuanphan!

Hi,

The url doesn't work. Can you check it again?

52 minutes ago, tuanphan said:

Hi,

The url doesn't work. Can you check it again?

https://projectsinsider.com/projects/661-chapel-661-chapel-street-south-yarra

Thanks!

43 minutes ago, tuanphan said:

Add to Design > Custom CSS

.code-block a[data-tf-popup] {
    border-radius: 5px;
}

.code-block a[data-tf-popup]:hover {
    background-color: #FF8500;
    color: white !important;
}

 

Thanks @tuanphan!