Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'button'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://vizchange.net I have a website where I present climate and weather data visualizations. I have it setup on several tablet and touchscreen computers at a national park visitor center and hotel. I am trying to minimize the scrolling on pages to encourage the website to be explored as much as possible, so I am trying to limit any hurdles on various devices, for example, scrolling. If you go to an example visualization (blog entry), I would like to add a button that takes the user back a single page. I have found code to do this, but it has limitations. For example, I would like the button to be styled by the SquareSpace site to keep the buttons consistent. Alternatively, if I add a 'button' block then I cannot add CSS/HTML code to the button, only navigation to a specific page. I would like simply to have the user go "back" one page in the browser history. Suggestions?
  2. Site URL: https://www.bassfreedom.com Hi there! I run a subscription website for bass guitar lessons. Within my site, I have loads of lessons and courses. Does anyone know how I get my logged in members a way to keep track of the lessons they watch/complete? I've seen other sites that have a "mark lesson complete" button (example attached) which is what I'm looking for! Any help would be greatly appreciated. Thanks!
  3. Site URL: https://meeting-house-fabric.squarespace.com I seem to find similar questions to this, but no definitive answer to my issue. Despite telling my client that users can make use of their browser's back button, she has insisted I put a styled back button on her site's shopping pages. Originally I turned on breadcrumbs, but frankly, SS's implementation of that feature is terrible, and it doesn't quite give me the functionality I need. So I added a code block that works with the site's overall style, and am able to put it on the collections pages (see first screenshot), but not on a product's detail page (which is where she wants it most!). Can anyone help me add the back button in roughly the same spot on the product's detail page? (See second photoshopped screenshot for how I'd like it to look.) website: https://meeting-house-fabric.squarespace.com pass: fabric button: <button style="width: 90px" class="outline_btn3" onclick="history.back(-1)"/><center>Back</center></button> css: .outline_btn3 { border-style: solid; border-width: 2px; border-color: #9c9a84; background-color: transparent; color: #9c9a84; padding: 12px 24px; font-size: 15px; cursor: pointer; } .outline_btn3:hover { background-color: #9c9a84; color: #ffffff; }
  4. Please help-- I am so confused. I have been trying to make a Portfolio site. I was advised to use the BLOG module instead of the Portfolio (which is fine) I can't figure out how to create the page hierarchy as shown in the attached image. (I have all of my projects on the detail page organized by category) The problems I run into is the LOOK- I want the summary to look like a protfolio button-- the kind where you hover over for the title....etc.
  5. Site URL: https://www.dermaskinandbody.com/ Hello! My client wants both calls to action to always be on each page of her site in the mobile navigation as you scroll. I am currently using SS 7.1 and I cannot for the life of me figure out how to custom code this. I need to basically make a sticky nav with the CTAs. Any help is much appreciated. Site is below: https://www.dermaskinandbody.com/
  6. Site URL: https://www.martinezlondon.com/ Hi There, Is there a way that when someone is logged into a members area, the main header button changes? Before login our objective is application forms, once logged in its for table bookings. Any recommendations or CSS code to set this up would be greatly appreciated. Thanks Charlotte
  7. Site URL: https://opera-stl.org/ Is there a way to see the clicks/analytics for the button in the header? I'm not seeing any stats for that button in particular in the list of button stats in the Analytics tab. Note: I did add an extra header button with code, so that may be messing with some things on the back end.
  8. Site URL: https://pomegranate-badger-p3wd.squarespace.com/ Hi, I'm trying to customize the newsletter form button on hover, and unable to figure it out. Here is the code I have so far (edits the padding, font type, color, border) button.newsletter-form-button.sqs-system-button { color: black !important; border: 2.22px dashed #000000 !important; padding: 10px 44px !important; font-family: 'ApercuR'!important; } button.newsletter-form-button.sqs-system-button:hover { background-color: #ffe3a7 !important; opacity: 1 !important; } But every time, I hover over the "submit" button it fully goes black. Here is the code that works for my Contact Us form, that is working perfectly that I'm trying to replicate for my newsletter. .sqs-block-form .sqs-editable-button { color: black !important; border: 2.22px dashed #000000 !important; padding: 10px 44px !important; //height and width font-family: 'ApercuR'!important; } .sqs-block-form .sqs-editable-button:hover { background-color: #ffe3a7 !important; opacity: 1 !important; } Would anyone be able to weigh in on this?
  9. Site URL: https://olympicpride.org/ I want to create a quick exit button that floats or banner, on squarespace, for our LGBTQ+ pride page for safety purposes, so that people can exit quickly if needed. I followed a thread that was talking about doing this but I could not get it to work. I do not know how to code but I can follow step by step instructions really well. Please help me. https://olympicpride.org/
  10. Site URL: https://pomegranate-badger-p3wd.squarespace.com/ I'm trying to add a dashed border around a button via custom CSS. Here is the code I have so far, .button-block .sqs-block-button-element { color: black !important; border: 2.22px dashed #000000 !important; padding: 10px 44px !important; } Currently, there are too many dashes, and I'm trying to "space" them out more. I'm trying to increase the length of each individual dash, please see attached. Would anyone know how to adjust this? changing the border: 2.22px isn't working, just makes the line thicker (and I'm trying to keep the same thinest of each dash).
  11. Hi, I am having a tiny issue where I've added a custom hover on my buttons. It works, but it feels like there is the tiniest delay on the colour of the type roll over vs the drop shadow roll over effect where the drop shadow happens before the text colour? its very tiny but feels off to me on my regular buttons I am using: .sqs-block-button-element:hover { background-color:#F6F4F1!important; color: #F42D27!important; box-shadow: 5px 5px #F42D27; } and header .header-actions .btn:hover { background-color:#F6F4F1!important; color: #F42D27!important; box-shadow: 5px 5px #F42D27; } I want when it rolls over to be the same colour as the website background but the font change colour and a box shadow drop , ive tried the background colour to be the same and transparent but i still notice the slightest delay any help is appreciated site is https://flugelhorn-seahorse-lzrb.squarespace.com/?p&p pw:design
  12. Site URL: https://www.quillsoft.ca/ Hello, Is it possible to auto resize text to a single line? In particular, for mobile viewing. In the screen shot attached, I would like both the button text and link text to be on a single line. Thank you!
  13. Site URL: http://brightbarboston.com Hey! I purchased a code from insdie the square and when I add it to squarespace it looks very messed up. Any help to make the following code look more like the picture I attached? .sqs-block-button-element{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background: #fff!important; width: 100px;padding: 20px 30px; border-radius: 0px!important; border: 5px solid #4ac0ee!important; color: #4ac0ee!important; font-weight: bold; text-transform: uppercase; text-align:center; z-index: 2; @include transition(all .15s .15s ease-out); &:after, &:before { position: absolute; width: 100%; max-width: 100%; top: 100%; left: 0; bottom: -10px; content: ''; z-index: 1; @include transition(all .15s .15s ease-out);} &:before {background: #4ac0ee; top: 10px; left: -15px; height: 100%; width: 15px;} &:after { width:100%; background: #4ac0ee; right: 0px; left: -15px; height: 15px; } &:hover {background: #4ac0ee; color: #fff; margin-left: -7.5px; margin-bottom: -7.5px; &:after,&:before {top: 100%; left: 0; bottom: 0px;} &:before {top: 0px; left: 0px; width: 0px;}&:after {right: 0px; left: 0px;height: 0px;}}}
  14. Site URL: https://asanchez-art.com/ password: cubecosmos The landing page buttons are too close to screen center and I was wondering if it was possible to spread them away from each other towards the centers of their respective sides?
  15. Site URL: https://asanchez-art.com/ Hello! If theres a better sub-forum for this question please let me know. As you can see in the attatched, my landing page image doesn't keep center going from mobile to desktop and its driving me crazy. I have created the image to be on center where the two images meet, to be split between the two buttons. Alternatively, would it be easier to just push those buttons away from eachother, and if so how could I achieve that? site password is cubecosmos if that is needed
  16. Site URL: https://khuramanarmstrong.com I use a lot of Image Block - Cards and would like to place the button under the image, not text, in some of them Is there a way to do this, even in code. Thanks.
  17. Site URL: https://educareguardian.com/ So I have added a different button using creedon's script and code (https://forum.squarespace.com/topic/155425-add-multiple-buttons-to-header-nav-in-squarespace-71/) which works perfectly. My problem now is to hide the CN button when I'm in EN page and hide EN button when I'm in CN page. Thanks.
  18. Site URL: https://chicory-parakeet-2jyh.squarespace.com/config/pages Hi, I am using the Almar template and would like to remove the button which says 'Get Started' in the header. I can't seem to find any way of editing it.. Any help much appreciated. Thanks!
  19. Sharing this - hopefully it saves someone some time. Here's a code block to create a button that opens an external website as a pop-up - just replace cnn.com with the site you want to appear in the pop-up. <center> <div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"> <div class="sqs-block-button-container--center preFlex flexIn" data-animation-role="button" data-alignment="center" data-button-size="medium" style="transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-duration: 0.65s;"> <a href="https://cnn.com" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true" target="popup" onclick="window.open('https://www.cnn.com','popup','width=600,height=600,scrollbars=no,resizable=no'); return false;"> This is CNN </a> </div> </center>
  20. Site URL: https://moneymoves.com.au Hi, I'm trying to target a pecific image card block to my site https://moneymoves.com.au There are three things I'd like to be able to do. 1. Center align the button only (Squarespace offers the option of changing the alignment of the text AND the button, but I want to keep the text left aligned and the button centred). 2. Make the button the full width of the container. 3. Add a little padding to the text/button in the image card. At full-size it's perfect, but at any other size, including mobile, the text is on the edge of the image card. I've successfully targeted other single elements before but finding this tricky. Let me know if you need any info from me. Thanks, James
  21. Site URL: https://www.blueridgeresearch.com Hello, and thank you in advance for looking at my question. I am looking for CSS code that will create a dark mask and white "Learn More" button on images when hovered/tapped. The images are inside a Summary block. The code can create this action and apply to ALL summary blocks, rather than using a specific id for each one. Please see screen shot below to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I currently have the Summary Block title link disabled. I am using the Burke template. Here is an example of page that I'm working on. https://www.blueridgeresearch.com/home-1
  22. Site URL: http://www.costanzaillustrator.com Hi The "close" or X button, and the "Next/previous" buttons do NOT appear when enlarging individual images on a gallery. How do I make them visible (yet discreet)? Thanks
  23. Site URL: https://educareguardian.com/ Hi, Is there a code where it automatically changes my header button to a different language? I have already finished adding EN and CN language on my website, the only problem I have left is my header button. I currently have 'Book A Consultation' button. I followed Tuan Phuan's tutorial on how to add 2 languages. I also have seen someone having the same problem but he's using a different tutorial for the multilingual website in which I have also tried but still doesn't work. As seen on the attachment, everything else is Chinese except the header button. Appreciate the reply. Thank you.
  24. Site URL: https://motoeconomista.com/ Hi there, I was wondering if anyone can help me modify the navigation buttons that seem fixed for the Banner Slideshow module as shown in the screenshot (black background). For some reason they're round and filled instead of outlined, which is inconsistent with the rest of the design template. I'm pretty sure the template I'm using is Euclid. I'm wanting to get them closer to something in the screenshot of the newsletter sign-up button (red background). Any help would be much appreciated. (On a side note, does anyone know a decent way to create a text-only slideshow, all the available modules with this template seem really clunky and ill-fitting no matter how much I move around the spacing and padding?) Thanks, Alex.
  25. Site URL: https://violin-papaya-mlxj.squarespace.com/ Hi, Does anyone know if I can replace a regular button in a simple list block with a form-block (open form button)? I basically want to go from the button to a form. (Lightbox sort of style). Thanks in advance for any suggestions.
  • Create New...