Can't add button to footer

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.   

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?

proctimise.squarespace.com

pw: lucy

41 minutes ago, tucecoop said:

proctimise.squarespace.com

pw: lucy

What kind of button are you trying to add?

If you edit the footer, you can add a button in the add block panel

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

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

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

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

No, I don't think it's that - I can't even add any type of block in the footer edit mode

2 minutes ago, tucecoop said:

No, I don't think it's that - I can't even add any type of block in the footer edit mode

That's very strange! 

Can you add me as a contributor so I can have a look. This is very abnormal

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

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.

Thanks but how do I add the code if I can't add a code block to the footer?

1 minute ago, tucecoop said:

Thanks but how do I add the code if I can't add a code block to the footer?

So you can't add any block at all? 

No, none at all

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).