tucecoop Posted April 11 Share Posted April 11 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
Beyondspace Posted April 12 Share Posted April 12 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, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
tucecoop Posted April 12 Author Share Posted April 12 proctimise.squarespace.com pw: lucy Link to comment
justinjamesclack Posted April 12 Share Posted April 12 41 minutes ago, tucecoop said: proctimise.squarespace.com pw: lucy What kind of button are you trying to add? Link to comment
justinjamesclack Posted April 12 Share Posted April 12 If you edit the footer, you can add a button in the add block panel Link to comment
justinjamesclack Posted April 12 Share Posted April 12 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
tucecoop Posted April 12 Author Share Posted April 12 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 Link to comment
justinjamesclack Posted April 12 Share Posted April 12 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
justinjamesclack Posted April 12 Share Posted April 12 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
tucecoop Posted April 12 Author Share Posted April 12 No, I don't think it's that - I can't even add any type of block in the footer edit mode Link to comment
justinjamesclack Posted April 12 Share Posted April 12 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 Link to comment
tucecoop Posted April 12 Author Share Posted April 12 I have tried deleting the footer and creating a new one. Still no luck Link to comment
justinjamesclack Posted April 12 Share Posted April 12 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
tucecoop Posted April 12 Author Share Posted April 12 Thanks but how do I add the code if I can't add a code block to the footer? Link to comment
justinjamesclack Posted April 12 Share Posted April 12 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? Link to comment
justinjamesclack Posted April 12 Share Posted April 12 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment