Squaredspace

This works great @tuanphan. I actually tried using the section ID code but not sure why it didn't work for me, I must have inputted incorrectly. Thank you so much for your help!!

Thank you @tuanphan ! The code works in principal. Looks like I have to make some tweaks to transparency, color, etc. to make them work. What if I want to use the code only for certain buttons on certain sections or pages? Is that when I should add a code block inside a given section? I guess it's not as simple as adding a block ID or section ID to the code? I thought I could change some buttons to secondary buttons and change up the code to secondary accordingly, but that doesn't work. Sorry about asking these basic questions. Still learning the structure of how CSS coding works 🙂

Hi @tuanphan, yes, those are the 4 effects I'd like to use as button options on my website.

The website is General 2 — kobold (squarespace.com), password is G5!6p56&46ed! Site is a work in progress (so it looks a little messy), and I'm not sure if I want to use animated buttons throughout the site or only for specific pages. Also, I'm pretty sure the code didn't work because there is another code(s) for the buttons right now. I'm relatively new to Squarespace and CSS coding, so I'm still learning the ins and outs of it all 🙂

These animated buttons are awesome. They're all great but I'm looking at how to use buttons 12-15. Doesn't look like it's a simple matter of inserting the code into the CSS block? I gave it a try and it didn't work for me.

It's just weird to me that when I click on the drop-down arrow to expand Custom Files, it only lets me upload images and videos. I don't have any control over what I can do with the files. I can't even scroll up or down Custom Files to select files or delete files. It really only lets me upload files and that's it. It's almost like there's no point in having this Custom Files function. I also use the Asset Library for images and videos. Can Link pages be used to embed MP4 videos like gifs? I don't believe so? I added a video from the Pages panel and tried linking it from there. The video appears but doesn't play.

Thanks. I tried using a code block to the site footer but since the contact us button won't be seen until the user scrolls down to the bottom of the webpage, I don't know if that achieves what I'm looking for. Unless there's a way to show the button at all times from the bottom of the page, regardless if the user is scrolling to the footer or not? Also, I'm still stuck on getting the form to appear on the same page where the user clicks the button. Just can't find the right code to make this happen 🤦‍♂️

Thanks for the update. I'm a relative newbie to Squarespace and coding, and not always up to date with what's going on 😬. So if Manage Custom Files is no longer a part of the latest UI, what would be the best way to manage files, aside from referencing the Asset Library? Specifically, I had wanted to upload an MP4 video into the Manage Custom Files and add a CSS code that calls the video as an embedded video (instead of using the video block to add a video onto a webpage). I'm not sure what the best way to do this would be? The following excerpt from a blog is what I wanted to follow: Looping videos look just like GIFs but they load faster and look a lot sharper. All of the videos that you’ve seen in this post so far are embedded MP4 videos. And it’s really not that hard to do! Go to Design > Custom CSS > Manage Custom Files and upload your video. Click in the CSS editor, click “Manage Custom Files” again, and then click on the file you just uploaded. This will cause the file URL to appear in the CSS editor. Copy the image file URL, add it to the code below, and paste all of that into a code block. Here’s the code you need: <video autoplay="autoplay" muted loop="true" width="100%" controls> <source src="ADDFILEURLHERE" type="video/mp4"> </video> But if the UI has since changed, any help on how to embed an MP4 video would be much appreciated. And also if there is a newer way to manage custom files.

I'm using Squarespace 7.1 and can't find Manage Custom Files anywhere. Under Custom CSS, there is only Custom Files which only allows me to upload files as soon as I click on the down arrow to expand it. I don't have any control to do anything else. Can anyone explain what the problem might be? Is this simply a user error on my part of some sort of Squarespace bug?

I did actually add the code block to every page individually. Using the Code Injection method means our company needs to upgrade its subscription plan, which for us as a small company, is currently not in the cards yet. Hopefully in the future. In the meantime, I've been using the Custom CSS feature extensively 🙂

So I added the following code block to each webpage: <div id="floating-button"> <a href="/contact-us2"> Contact Us </a> </div> And in the Custom CSS, added the following code: #floating-button { position: fixed; top: 87%; right: 0; transform: rotate(90deg) translateX(-45%); transform-origin: 100% 0; z-index: 99999; } #floating-button a { background: darkred; color: white; display: inline-block; font-size: 12px; text-transform: uppercase; font-family: arial; font-weight: 400; letter-spacing: 0.15em; padding: 0px 10px; border-radius: 0px 0px 10px 10px; transition: ease 0.5s !important; } #floating-button a:hover { padding: 2px 15px; background: #555555; } This creates a Contact Us button that scrolls/floats on the bottom right of each page. This works in that the contact form opens when you click on it, and from any page. But this form opens a separate, standalone page. I'm still trying to figure out how to get the form to open (or pop-up) on the same page where the user is currently navigating, i.e., the user doesn't go to another page where the form is. Any guidance is much appreciated.

Thanks for replying. Sorry if my post was confusing. I would like: a button float on right of site (all pages, same button) click button will open a "pop-up" Contact Form, but the form stays on the page where the user is scrolling after user clicks to submit form, user is back to the current page where the user was scrolling. The bottom still floats on the right of site when users scroll, this button still on right of site Hopefully this is possible!

Hello! I'm relatively new to Squarespace and CSS coding and am requesting help regarding making a floating form on my website. I'm sure this has been covered before, but so far I haven't quite found the exact solution I'm looking for. I'd like the contact form to be floating and sticky to the scrolling of the screen of each webpage, ideally on the bottom right of the page. Maybe it can "slide" open upon clicking? I'm currently testing a button in the footer and a button on the side, the latter of which is currently "coded" to the one page only. This would be the preferred way since the button would appear on all pages while scrolling, as opposed to appearing only in the footer. But I realize I would need to add code to every page (since our current Squarespace plan is a Personal plan so there's no code injection option which may limit what I can do). I don't really know what the next steps to take are. As mentioned, I'm a relative noob when it comes to coding so I'm not sure if either of these 2 approaches are the best ways to start. Any help is much appreciated! Site is ranunculus-fish-fhr3.squarespace.com, password is G5!6p56&46ed!

Hello, I'm also in the same boat. Currently creating a mock website (using Squarespace v 7.1) on behalf of our company. The plan is to replace our existing site (currently running Squarespace 7.0) once the powers-to-be agree to the content and look and feel. It'll likely take up to 2 month or so to finalize content and get approvals. After my trial ends in 4 days and I get an email asking if I want to resume the trial or upgrade, if I choose trial, how long does the second trial period last? Is it possible to keep trialing until we are ready to go live? That's almost what the last paragraph of your answer implies, though I could be wrong? Thank you for your clarification in advance.