Creating 2 Buttons on Hayden banner Template instead of 1

Site URL: https://www.immyhowardmillinery.com/

Good morning, 

I am very new to custom CSS, and am wondering if anyone might be able to help me with my Hayden template on Squarespace.

I am trying to create 2 buttons on the banner section of my homepage, instead of just having one central button (have attached pics of what the current view is, and what I'd hopefully like to create)- Is there any way I can do this? Apologies if I am missing something really obvious! 

Cheers

Immy

Hi. This is possible.

Which plan do/will you use?

Can you add a text link under or above button?

On 5/7/2021 at 1:20 PM, tuanphan said:

Hi. This is possible.

Which plan do/will you use?

Can you add a text link under or above button?

Hi Tuanphan, 

Thanks so much for your help- I use a Personal Plan on squarespace, with the Hayden Template- is that the correct info? I hope so!!

I can't seem to add text under or above button sadly, only seems to be the button only (the section with the button in is called 'Banner')

Thanks so much again!

Immy

On 5/7/2021 at 1:20 PM, tuanphan said:

Hi. This is possible.

Which plan do/will you use?

Can you add a text link under or above button?

Hi Tuanphan, 

Just wanted to check in with this and ask if you needed any extra info from me at all? Not really sure if I can resolve this button issue as the button itself is in the banner of my template. Hmm. If there’s any info you need from me at all, just let me know 🙂 thanks ever so much. Your help really is invaluable!

Immy

On 5/7/2021 at 1:20 PM, tuanphan said:

Hi. This is possible.

Which plan do/will you use?

Can you add a text link under or above button?

Hi Tuanphan

Just realised I haven't mentioned which version of squarespace I'm on, sorry about that. I have version 7.0 with the Hayden template. I hope this helps!

Thanks x

3 hours ago, tuanphan said:

Edit Site Footer >> Add a Markdown Block >> paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<p class="tbutton"><a href="https://google.com">Button 2 text</a></p>').insertAfter('body.homepage .desc-wrapper>p:nth-child(3)');
	});
</script>
<style>
body.homepage .desc-wrapper p a {
    background-color: transparent;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    border: 2px solid #9c9999 !important;
    color: #9c9999;
    -webkit-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -moz-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -ms-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    -o-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out;
    font-family: futura-pt;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 1.75em;
}
  body.homepage .desc-wrapper p a:hover {
    background-color: #9c9999;
    color: #181818;
}
  body.homepage .desc-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
  body.homepage .desc-wrapper p:nth-child(-n+2) {
    display: none;
}
  body.homepage .desc-wrapper {
    padding-top: 100px;
}
</style>
  

Hi Tuanphan

You are such a wizard, thank you so much! This has worked perfectly! Once again, my endless gratitude!

Immy

I tried this code and it did not work for me. Can anyone help?

@ticecl

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Bagwell Fence

I would just like to have two buttons instead of the one Learn More Button on the homepage banner

On 5/10/2022 at 8:50 PM, ticecl said:

I would just like to have two buttons instead of the one Learn More Button on the homepage banner

You mean add a second button next to Request a service button?