Jump to content

Can't add button to footer

Recommended Posts

I am having problems with adding a button to a website footer. It was working fine before but no longer works, so wondering if it is a bug.   

Every time I am in the edit footer mode and go to add a block, it just takes me back up to the top of the website page and won't insert a block. I have checked all help topics and forums and can't find a solution. 
 
 
Link to comment
  • Replies 16
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

5 hours ago, tucecoop said:

I am having problems with adding a button to a website footer. It was working fine before but no longer works, so wondering if it is a bug.   

Every time I am in the edit footer mode and go to add a block, it just takes me back up to the top of the website page and won't insert a block. I have checked all help topics and forums and can't find a solution. 
 
 

Can you share your URL so I can check easier?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Otherwise you can create a button using html and css. 

For example this is the button I use and have created using html and css;

 

<style>
.container-button {
    display: grid;
    place-items: center;
  }
  
  .animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 18px;
    background-color: transparent;
    border-radius: 10px;
    font-weight: 500;
    color: #151515;
    box-shadow: 0 0 0 1px #151515;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button svg {
    position: absolute;
    width: 24px;
    fill: #151515;
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button .arr-1 {
    right: 16px;
  }

  .animated-button .arr-2 {
    left: -25%;
  }

  .animated-button .text {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button:hover {
    box-shadow: 0 0 0 12px transparent;
    color: #F1F3F6;
    border-radius: 10px;
    background-color: #151515;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button:hover .arr-1 {
    right: -25%;
  }

  .animated-button:hover .arr-2 {
    left: 16px;
  }

  .animated-button:hover .text {
    transform: translateX(12px);
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button:hover svg {
    fill: #F1F3F6;
  }

  .animated-button:active {
    scale: 0.95;
    box-shadow: 0 0 0 4px #EE7F01;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
</style>

<a href="https://calendly.com/justinjamescreative/discovery-call" target="_blank">  
  <container class="container-button">
  <button class="animated-button">
        <svg viewBox="-3 -3 26 26" class="arr-2" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
          ></path>
        </svg>
        <span class="text">Free Quote</span>
        <svg viewBox="-3 -3 26 26" class="arr-1" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
          ></path>
        </svg>
      </button>
</container>
</a>


Obviously change the text in the span class and the url in the a href= line

Link to comment
Just now, justinjamesclack said:

Otherwise you can create a button using html and css. 

For example this is the button I use and have created using html and css;

 

<style>
.container-button {
    display: grid;
    place-items: center;
  }
  
  .animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 18px;
    background-color: transparent;
    border-radius: 10px;
    font-weight: 500;
    color: #151515;
    box-shadow: 0 0 0 1px #151515;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button svg {
    position: absolute;
    width: 24px;
    fill: #151515;
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button .arr-1 {
    right: 16px;
  }

  .animated-button .arr-2 {
    left: -25%;
  }

  .animated-button .text {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button:hover {
    box-shadow: 0 0 0 12px transparent;
    color: #F1F3F6;
    border-radius: 10px;
    background-color: #151515;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button:hover .arr-1 {
    right: -25%;
  }

  .animated-button:hover .arr-2 {
    left: 16px;
  }

  .animated-button:hover .text {
    transform: translateX(12px);
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .animated-button:hover svg {
    fill: #F1F3F6;
  }

  .animated-button:active {
    scale: 0.95;
    box-shadow: 0 0 0 4px #EE7F01;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
</style>

<a href="https://calendly.com/justinjamescreative/discovery-call" target="_blank">  
  <container class="container-button">
  <button class="animated-button">
        <svg viewBox="-3 -3 26 26" class="arr-2" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
          ></path>
        </svg>
        <span class="text">Free Quote</span>
        <svg viewBox="-3 -3 26 26" class="arr-1" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
          ></path>
        </svg>
      </button>
</container>
</a>


Obviously change the text in the span class and the url in the a href= line

And also you can change the colours too

Link to comment
Just now, tucecoop said:

Thanks this is what I normally do - but on this occasion its not working, seems like something is wrong in squarespace. I just want to add a primary button, but everytime I try it won't work

Okay, so if the button isn't working it might be that the colours are the same as the background colour, or the button might be hidden

Link to comment
11 minutes ago, tucecoop said:

I have tried deleting the footer and creating a new one. Still no luck

Try adding the custom button using the code above. Put the code in a code block and change the colours, text and url to whatever you choose.

If you want a native button, and we can't figure it out, you may need someone to come in as a contributor to the site and check things over and potentially add the button.

Link to comment
2 minutes ago, tucecoop said:

No, none at all

The only things I can think of then is, try removing your css in the custom css panel, save it in a wordpad or something and then click save on the custom css panel. 

Reload the page and see if you can add a block to the footer then. 

If you still can't add a block, then you may as well add your css back in the custom css panel. And then the only option is to add a new section above the footer and recreate the footer in a normal section. The only issue with this option, is that you'd have to save the section and add them on each page (this option is worst case scenario and sucks).

Link to comment

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.