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://alexandrahall.squarespace.com Hey community! I am doing a project for a program I am in where we are asked to recreate a site that already exists. I chose: www.cascobotanicals.com I am trying to get the buttons to look like the ones on my inspo site. But it seems very tricky and confusing. My squarespace site is https://alexandrahall.squarespace.com and password is brineintopedro Any idea how to get the buttons to look somewhat like the ones on www.cascobotanicals.com ? I attached a photo of what they look like below. Thanks so much.
  2. Site URL: https://typeAprofessionals.com Hi all, I have two large side-by-side buttons at the bottom of my home page, with a spacer on each side to make them more centered on the page. The buttons are the same width as each other and look fine in desktop and mobile view. However, in tablet view, the "order form" button is slightly narrower than the "file upload" button and it looks bad that they're not the same width. I believe button width in tablet view is being determined by their text labels, and "file upload" is one character longer than "order form." If I remove one letter from the "file upload" button, then they're the same width in tablet view. But obviously I want to keep the labels as is. I also noticed that if I remove the spacers, then they're the same width in tablet view, but I don't want to do this either because I like them more centered. I've searched the forum on this but haven't found a solution. If anyone can come up with one using CSS, it would be much appreciated! Thanks in advance!
  3. Howdy. If I want to create "a hovering button" linked to my price or contact page when I'm scrolling thru my galleries how do I do that? Idea is that this button should hover always on a left side of the page when going thru my website.
  4. Site URL: http://foxandvamp.squarespace.com/ Hi All Another questions from me please! I have a "Pay with..." Button I need to incorporate on a website. The developer tools for the finance company are a little vague as far as I can see. The code they've provided was the minimum to get the button onto the website, but there's no action actually linked with the button when you click it. When I try and any "onclick" action, it breaks the code for the presentation of the button. I've contacted them for assistance, but in the meantime, can anyone help here please?
  5. Site URL: https://fscvideo.squarespace.com/ Hi! I'm testing a site and want the button on the first page of the index to be hidden and fade into appearance after 50s. The banner video will automatically replay and the button should then stay fixed on the page. I added some CSS to bump the button down lower on the page but when the page loads, it appears in its default position then drops to the bottom where I want it once the page loads. It doesn't look good. So I need help with that as well. //position button at bottom of page #block-yui_3_17_2_1_1617904209747_3948 { position: absolute; top: 150px; width: 100%; } Thanks all!
  6. Site URL: https://ray-shallot-gz3z.squarespace.com/ Hi there - Im looking to have two buttons next to each other (right bound) on my site's global header. https://ray-shallot-gz3z.squarespace.com/ One that says apply one that says donate ... can someone help with css ? Where should I paste the code for changes to the header?
  7. Site URL: https://www.meryangelo.com hi there, I am trying to get these three buttons side by side, is it possible to do? what css code should I use thank you in advance, Mery
  8. Site URL: https://cliftoncreativeevents.com I have multiple shop pages but I don't want anyone to be able to purchase anything directly. So I hid the add to cart button and want to add a contact button which links to the form page. But is there a way to have that button pop up on all product pages without having to individually add it in?
  9. Site URL: https://www.thesoaresprotocol.com/ Hi guys! So I set up a subscribe button on my homepage (created from a rss feed burner > follow.it). In my editor I was pleased to see that it would line up perfectly with my news blog button on its left. But when I check from a user standpoint the button box is slightly lower than the left button. Here is the code: <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700'); .form-preview { display: block; margin-top: 30px; padding: 40px 50px 40px 50px; max-width: 350px; min-height: 200px; border-radius: 6px; box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25); } .form-preview .preview-heading { width: 100%; } .form-preview .preview-input-field { margin-top: 20px; width: 100%; } .form-preview .preview-input-field input { width: 100%; height: 40px; border-radius: 6px; border: 2px solid #e9e8e8; background-color: #fff; outline: none; } .form-preview .preview-input-field input::placeholder, .form-preview .preview-input-field input { opacity: 0.5; color: #000; font-family: "Montserrat"; font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; } .form-preview .preview-submit-button { margin-top: 10px; width: 100%; } .form-preview .preview-submit-button button { width: 100%; height: 40px; border: 0; border-radius: 6px; line-height: 0px; } .form-preview .preview-submit-button button:hover { cursor: pointer; } </style><form data-v-1ed4bb5e="" action="https://api.follow.it/subscription-form/Um9aUTI1ajA3UEZRSXN2aitJdU8rWCtWWDVlWHlqUU0wdERBRkJLL3Rnc1lmTWE3WVFndWxFbVErY01WRldDOUYxaVdMY2YwSE5INWo2akQ0NE5lcCtGaVk4MXJXOC93bFJ4Zm5UK2pZRHJFSnVEdkN5cHBHb0lITEI1cXV1dXB8TXFxcmozQ0hLYm0vSkJOUkJ3dWIrQ2E3OCswRnI1emhBYlNvNTVUYVVaaz0=/8" method="post"><div data-v-1ed4bb5e="" class="form-preview" style="background-color: rgb(255, 255, 255); border-style: solid; border-width: 1px; border-color: rgb(204, 204, 204); position: relative;"><div data-v-1ed4bb5e="" class="preview-heading"><h5 data-v-1ed4bb5e="" style="font-family: Montserrat; font-weight: bold; color: rgb(0, 0, 0); font-size: 16px; text-align: center;">Zoya. Subscribe to "News Blog"</h5></div> <div data-v-1ed4bb5e="" class="preview-input-field"><input data-v-1ed4bb5e="" type="email" name="email" placeholder="Enter your email" spellcheck="false"></div> <div data-v-1ed4bb5e="" class="preview-submit-button"><button data-v-1ed4bb5e="" type="submit" style="font-family: Montserrat; font-weight: bold; color: rgb(255, 255, 255); font-size: 16px; text-align: center; background-color: rgb(0, 0, 0);">Subscribe</button></div></div></form> I would like to simply correct that small gap and have both lined up correctly (the mobile view isn't an issue since everything appears vertically). I looked at code online but still new to coding. Thank you for your help!
  10. Site URL: https://www.originalworksofartinc.org/registration I'm just trying to create secondary button colors and styling on these pages. I understand that I can create different colors for different sections but within a section I might want the CTA to stand out from other buttons. For example, on this page (https://www.originalworksofartinc.org/registration) I want the "Learn About the Program" to be the main CTA but the "Learn about the Instructor" to be a secondary option that's an outline button or just a different color. Similarly, I'd like to do the same with the "Apply for..." buttons below. I keep trying CSS that it says has errors but it never specifies where so I can't be clear on what to fix. SOMEONE has to have figured this out. Thanks in advance.
  11. Site URL: https://www.elizabeth-pierce.com/meal-plan-app Hi all, I've created a sidebar using a plugin and I'm looking for a way to be able to show or hide it upon clicking a button. I found a way to show more or less using code I found on this forum, however, because my sidebar was created using a separate page, the show more/show less buttons only work for the 'sidebar' page and not the 'meal plan app.' page it was made for. Here is the code I tried (from this thread: https://forum.squarespace.com/topic/49530-how-do-i-create-hideshow-section-of-an-entire-page-of-text-images-and-or-galleries-in-squarespace-spoiler-functionaccordiancollapse/): <script> /* This script is a custom script to control the 'show' / 'hide' extra feature. To use: give each button you want to make an expander an href of "expand-3", if you want it to expand / collapse the next 3 blocks. Make sure to make each button say 'Show More' as its default text. */ var SHOW_MORE = 'Show More' var COLLAPSE = 'Show Less' $(window).load(function(){ // prepares all buttons by wrapping the correct # of following divs into a div with class 'extra_gallery' $('a[href^="#expand"]').each(function(){ // parse # of sibling elements to wrap from href attribute and then wrap them. var n = parseInt($(this).attr('href').split('-')[1]); var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n) // this is the line that is different. we use display:none; on the DOM element that wraps the additional gallery. next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>'); /* // preload_images next_n_divs.find('img').each(function(){ image = new Image(); image.src = $(this).attr('data-src')+'?format=500w'; console.log($(this).attr('data-src')); }); // control for click behavior */ $(this).click(function(){ var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery') if (target_gallery.is(':visible')){ $(this).text(SHOW_MORE); } else { $(this).text(COLLAPSE); } target_gallery.slideToggle(); return false; }); }); }); </script>
  12. Site URL: https://www.cltrickett.com On my homepage I cannot get my buttons on the poster image to align with one another . Can anyone help please?
  13. Hi, I am wanting to change the size of the button on just one page of my Squarespace 7.1 site. Is there any code to isolate just the one page?
  14. Site URL: https://octahedron-salmon-pbay.squarespace.com/config/ I am having a glitch occur when I click the RSVP button in my websites NAV. When I click the RSVP button to scroll to my footer (where the RSVP will appear when I've built it) a small white bar appears at the bottom of my viewport window. Refreshing the page and signing out then back in does not seem to resolve the issue. If I remove the #RSVP portion of the URL after clicking and then refresh it goes away. So it's appearance is definitely a result of clicking the RSVP button. Could anyone take a look at advise possible solutions?
  15. Site URL: https://www.jieliuk.com/dszh/p/r32-vacuum-pump Hello Everyone, I run into some issues while editing the website, as I'm trying to create another section of the store to sell some products; however, all products are displayed properly except the option to purchase or add to cart doesn't display for some reason. I would really appreciate any forms of help & Support. Kind regards, JIELI
  16. Site URL: https://www.sophiabischof.com/coaching Hi All, I would like to have a pop up lightbox when clicking on a button. I am aware that you can usually use a form in lightbox mode to get the same effect. However, on my current website I am using image blocks to advertise my services and I am unable to link the buttons in my caption into pop ups/a form. I provided my url for reference. Thanks for your help!
  17. Hi there, Found this awesome code, which works brilliantly for buttons. I've been trying to see how this can also be achieved for the header nav button and form button, but can't seem to target the right class. Would be great to have all buttons looking the same. Thank you! // Fade Out Line Buttom - Left To Right // .sqs-block-button-element--small { position:relative; height: 60px; line-height: 60px; text-align: center; transition: 0.5s; padding: 0 20px; cursor: pointer; -webkit-transition:0.5s; } .sqs-block-button-element--small:hover { background-color: transparent !important; border-color: transparent !important; color: #000000 !important; } .sqs-block-button-element--small:hover:before{ transition-delay: .2s; } .sqs-block-button-element--small::before{ width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; left:0; box-sizing: border-box; transition: .2s; } .sqs-block-button-element--small:hover::before { width: 100% !important; transition: .7s; } .sqs-block-button-element--small::before { border-bottom: 1px solid #000000; }
  18. Site URL: https://www.znthtriclub.com/ Hi there, I'm hoping someone way more knowledgeable than I am might be able to help with the issue I'm facing. In short, I'm trying to replace the standard CTA button one can have in the nav bar with a bespoke image, such as the one attached here for example. Ideally, I would love this image to change depending on the page you're own (i.e. a lighter version for a darker page, and vice versa) as well as the option of having a hover action. It also needs to work on mobile. You can see on my current website where I've got to. Basically, I've managed by boshing together some CSS taken from various bits and bobs I could find on the web. It's not pretty but at least I have an image for my CTA. The issue right now is that it doesn't work on mobile, there's no hover and I can't apply a different colored version for other pages. Here's the code I used in the Custom CSS field. /* Join button */ .header-actions-action--cta * { background: transparent !important; color: transparent !important; } .header-actions-action--cta { background-image: url(https://static1.squarespace.com/static/5fd7b9876223c8317d1720c2/t/60624222fc4584071e57dd8e/1617052194489/join-the-team.png); background-size: 100%; padding: 2vw; background-repeat: no-repeat; background-position: center center; } Any advice, tips or tricks would be immensely appreciated! Thank you so much, Ben
  19. Site URL: http://www.versefilmprojects.org Posted this question in another feed but haven't had any answers. Please see above link for screenshots of the issue. I can see others online having the same issue. Help please! 🙂 Thanks in advance Site password is: 2021
  20. Site URL: https://mandolin-parrot-rlyc.squarespace.com/ Password: intero Hi everyone, I would like to align the 'Contact button' and social icons on my website with the navigation menu. At the moment, the button & icons are floating above the level of the navigation menu. Does anyone have an idea to fix this? Thanks in advance. KR, Jan
  21. Site URL: https://www.orladempseycoaching.ie/ I want to add a second button under this button or side by side please. How can I do it?
  22. Site URL: http://https/www.meredithdipietrodesign.com/ Hello! I am wrapping up designing my website but I am having trouble with the button I added in the header. I want it to say RESUME and when a person clicks on it, I want a separate window come up with a PDF of my resume. When editing my header, I toggled on the button in the "elements" section of the dialog box. When I clicked on the gear and the additional dialog box came up, in the "file" section I uploaded a PDF of my resume. However, it doesn't work- when I click on the RESUME button I've created, it just takes me to my work page. Is there a glitch that I don't know about or something I'm doing wrong? Any suggestions would be appreciated- TIA.
  23. Site URL: https://goby-oarfish-j8jm.squarespace.com/ Hello, I'm looking to increase thickness of the arrows (think the icon is actually called a Caret) and X on my gallery lightbox view to 3px to match the wight of my hamburger icon (see below screenshot for reference) I'm using the Novo template and I'd really appreciate it if someone an provide me with some code to either change the weigh of the arrows / X? Failing that, code to increase them in size so they visually resemble 3px in weight. Thanks in advance for your advice!
  24. Site URL: https://www.takeout.kouzinagreekmeze.co.uk/ Hello, I am trying to replace the button on my header that says 'Order Now' with custom html code that produces a button that takes customers to a third party ordering system via a pop up. I have already successfully installed this button on my home page main image (the one that also says 'Order now') via a coding block, but i also want it to appear in my header so that it can be accessed anywhere on the website but I am unsure of how to insert this code into my header, replacing the header button. The code is the following; <span class="glf-button" data-glf-cuid="cfb755ea-28c0-4c43-b168-b6197bc0c93a" data-glf-ruid="ce751149-2381-40f0-beb0-7b29799a5ec3" style="font-family: inherit; text-align: center; text-shadow: none; display: block; width: 150px; margin: 0 auto; padding-left: 20px; padding-right: 20px; padding-top: 17px; padding-bottom: 17px; font-size: 12px; font-weight: 500; color:#000000 !important; border-radius:0px; background-color: #E2C273">ORDER NOW</span> <script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async ></script> Any help would be much appreciated! Thank you.
  25. Site URL: https://www.amovintage.com Hello, I am looking to use a custom made image (jpeg) to replace the sold out button throughout my website, is there a code to do this? I have attached what it currently looks like, and an example of the sort of image I want to create and upload Thankyou
  • Create New...