Brooklyn Theme: Add a theme styled button to "Pages"

[BullandShepherd]

Hi,

I'd like to be able to add a theme styled button to some of the "Pages" in my site.  Ideally it would look the same as the Hero button on my homepage slide (which has the same look as my Add to Cart) button, etc).

I assume I can just add HTML code to the page itself, but I seem to be incapable to writing the code properly.

Can anybody help?

Thanks!

[Michal17]

Hi @BullandShepherd 

Sincerely hope you're having a great day!

I've read your problem and before providing a solution, would like to analyze your website. Then, I will provide a solution to you up here - on the forum.

Could you share your website URL? And if your website is password protected then also provide a password?

If you have any further questions, please do reach out either here on the forum, or via a private message/email.

[BullandShepherd]

I've sent you a private email.  Thanks.

[Michal17]

Hi @BullandShepherd 

Hope you're a having great day! You're welcome.

Let me check it out and get back to you.

[BullandShepherd]

Hi @Michal17,

Thanks!  I'll wait to hear from you.

[LitExtension]

Hi @BullandShepherd, 

You just need to add button with HTML structure: <a href="link" class="btn">Text Button</a>
Hope it clear to you.

[Michal17]

Hi @BullandShepherd 

<a href="/collections" style="color: #ffffff; background-color: #1f2021" class="btn hero__cta" tabindex="0">Buy now</a>

Here is the code for the type of button you are looking for. This is the code of a button that would redirect visitors to the collections page of your store.

Please tell me where the button should redirect your visitors when they hit it. And I'll make sure to correct the code to your liking.

[BullandShepherd · Accepted solution]

Hi @Michal17 ,

Thank you so much for taking the time to help.  I've used your work as a starting spot to create a button with all the design elements I was looking for.  For reference, here's the code I ended up using .....

<div style="text-align: center;"><a href="https://bullandshepherd.ca/collections" style="color: #ffffff; background-color: #1f2021; font-family: Montserrat,sans-serif; font-weight: 600; font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 12px 20px; font-size: .8125em;" class="btn hero__cta" tabindex="0"> Shop Bull and Shepherd</a></div>

Thanks again,

Steve