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

Search the Community

Showing results for tags 'button'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

Found 404 results

  1. Hey! - made a HTML Code for 2 buttons next to each other - i´m trying to get one of the buttons to stay solid and 1 to be outlined - what i`m having difficulity with is finding out what CSS code to target it with because they are inn the same code block so i can`t target a spesfic code block i need to use "child" or something , i`m not sure - anyone got a clue? Codes and images are below: This is the HTML code: <a class="button cta-button" href="https://www.elevated.no/priser">Se Priser</a> &nbsp; &nbsp; &nbsp; <a class="button cta-button" href="https://www.elevated.no/tjenester">Kom i gang</a> And this is the CSS Code .button { border: 2px solid #2cd4d9; border-radius: 50px; background: #2cd4d9; display: inline-block; font-size: 15px; font-weight: 500; text-align: center; padding: 15px 20px; width: 103px; color: #000080 } .button:hover { background: none; color: #FFF; opacity: 1 !important; transition: 0.5s !important; }
  2. Site URL: http://www.heyykristen.com Help! I am a newbie freelance full stack developer and am stuck on a clients request - She is an artist with a gallery page. Currently text links in description to etsy to purchase specific prints. She wants 1. Actual buttons instead of text links 2. nothing showing but the image - for the button to appear on click or hover. I have tried SQSthemes lightbox anything plugin but it does not work with gallery images. I have tried trying to find block ids to target them but only see a collection id for the whole gallery page (was able this way to add buttons - but it literally turned the nav bar and everything on the page to buttons) I have tried doing clickthrough URLS to new pages with the larger image and button - but WELLS template does not support this and she does not want to change templates. I have suggested just doing lightbox's for each image as the solution - but she really prefers to keep the gallery for the left and right arrows. Would absolutely love any help I can get. This is the first time I have gotten stuck on a project and I am stressing out a bit! thank you so much Paige
  3. Site URL: https://chiton-dandelion-6p2j.squarespace.com/ Hello, New Squarespace user. I would like to have all my buttons like option number 13 (sliced button) on this page: https://webdeasy.de/en/top-css-buttons-en/ The code I'm looking to apply is this one (CSS): body { background-color: #ff8a80; font-family: 'Fjalla One', sans-serif; text-transform: uppercase; height: 95vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*--Button Styles--*/ .btn-slice { padding: 1.2rem 2.5rem; border: 2px solid #ffffff; border-radius: 0rem; color: #ffffff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.3rem; position: relative; -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */ -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */ } .btn-slice .top { position: relative; height: 6px; overflow: hidden; top: 0; -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */ -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */ -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */ -webkit-transition-delay:0.35s; -moz-transition-delay::0.35s; -ms-transition-delay::0.35s; -o-transition-delay::0.35s; transition-delay::0.35s; } .btn-slice .bottom { position: relative; height: 6px; overflow: hidden; bottom: 0; -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */ -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */ -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */ -webkit-transition-delay:0.35s; -moz-transition-delay::0.35s; -ms-transition-delay::0.35s; -o-transition-delay::0.35s; transition-delay::0.35s; } .btn-slice .bottom span { top: -6px; position: absolute; left: 0; } .btn-slice:hover .top { top: -5px; -webkit-transition-delay:0.35s; -moz-transition-delay::0.35s; -ms-transition-delay::0.35s; -o-transition-delay::0.35s; transition-delay::0.35s; } .btn-slice:hover .bottom { bottom: -5px; -webkit-transition-delay:0.35s; -moz-transition-delay::0.35s; -ms-transition-delay::0.35s; -o-transition-delay::0.35s; transition-delay::0.35s; } .btn-slice:hover, .btn-slice:focus, .btn-slice:active { margin-left: 10px; } .btn-slice:before{ content: ''; height: 1px; width: 60px; background-color: #ffffff; position: absolute; margin-top: 6px; right: -35px; -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */ -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */ } .btn-slice:hover:before{ width: 130%; } Can anyone guide me on how to do this? Or point me out to a guide that shows this? Thanks Resources
  4. Site URL: https://matey.app Hi, does anyone know how to change the image block poster button size to be medium? It is set to small by default. I need it to be medium to match the size of the other buttons on the site. Thanks!
  5. Site URL: https://www.swalsh.art/contact I am having a problem changing the hover color of the submit button on this form. I would like to have the outline style button in white, then for it to be a pink (F551CC) outline on hover. This is the code I'm trying to use: .form-wrapper input[type=submit]:hover { background:transparent!important; border:2px solid #F551CC!important; } I can't get the hover state to change from a white background with pink text. Can anyone help?
  6. Hello, I have buttons built into the template that I am using. I don't need the buttons to link out. The buttons work well for a call to action only for the site. How can I disable or deactivate the buttons?
  7. Hi, Does anyone have tips on how to change the play button on an embedded video? I definitely would prefer for it to be more stylish than this. Or I wish Squarespace would have more variety on the design.
  8. Site URL: https://www.theshoreatgerringong.com.au Hi, I set up a site and now 2 months later the sites MOBILE book now button isn't displaying white text. It is showing on desktop and the link works and if I change the colour scheme the text is on there.. So how can I change this and would there be any reason it has just changed to the same colour as the button/why it shows on desktop and not mobile? I have used CSS to make the text white however I'm not sure the code was correct as it did not change the button text. Thanks, Lee
  9. Hi I'm trying to create something like this: https://www.laserclinics.com.au/laser-hair-removal-prices If I place buttons next to each other, how do I add code to them so that a table like this can appear when each button is clicked.
  10. Site URL: https://www.alexandrapolunin.com/pinterest-anleitung Hi everyone, I'd like to change the font-family for this button which opens a Leadpages pop-up: https://www.alexandrapolunin.com/pinterest-anleitung (The button at the very top called "Will ich haben"). The font family should be Brandon Grotesque. This is the script provided by Leadpages: I've tried changing the font family several times but nothing worked. These are a few ways I've tried: font-family: 'Brandon Grotesque'; font-family: "Brandon Grotesque" Thank you so much for your help! Lisa
  11. Site URL: https://nymn.org Hello, I'm using some custom HTML to create a fixed floating button on my website's homepage that visitors can click to join our mailing list. The code is injected into the Homepage HTML, with the goal being for the button to only appear on the Homepage. However, the button is persistent across the entire site, which we do not want. On the Squarespace backend, the button acts as expected, appearing on the Homepage but disappearing on all other pages. However, when the webpage is opened up seperately, the button is visible on all pages. I've posted the HTML as well as the CSS we are using down below. Any help is appreciated, thank you!
  12. Site URL: https://rachelle-bella.squarespace.com/ Hello! I've been trying out the new Squarespace 7.1 templates and I'm not really liking it too much. I was hoping someone could help me figure out the CSS to change the contact form button's LETTER SPACING. Site: https://rachelle-bella.squarespace.com/ Password: bella Would love some help! This is a whole new system to learn and code.
  13. Hi, Im having an issue since yesterday and its driving me crazy. Whenever I click on Pages, Design, Commerce or whatever, I cant go back by clicking the < Home button at top. Im currently on Firefox and I cant work because I need to do a lot of things yet cant go back and have to refresh everytime! You might question if I used a custom code on that webpage which I did! But, I work with many different clients and I went to their pages and it doesnt work neither! And those webpages have CSS only. So its not a Javascript issue. I dont know if this is the right subforum so my apologies. EDIT: its just Firefox, Chromium works fine.
  14. Hello! Anyone know the code how can I move (move around) & resize the music player?
  15. I want to make it where the user will press a button at the top of the page and then the user will be moved to a different part of the same page. I tried using the buttons in squarespace however I was not able to use the function in the same page, it only was able to do from page to page. Thanks for your help!
  16. Site URL: https://providencepoweryoga.squarespace.com I have created four columns, and each column contains an image, text block, and a button. Also, I had a border and drop shadow created for each column. How do I make all the buttons show up at the bottom of the box? https://providencepoweryoga.squarespace.com Password - power See screengrab. Here is the code I injected into that page for the border/drop shadow/hover. <style> .sqs-col-3 {border: 2px solid ##F7F5F4;width:22%!important; height:690px; margin-left:2%;box-shadow: 5px 5px 15px rgba(0,0,0,0.4)} .sqs-col-3:hover .sqs-block-button-element {background-color: ##F7F5F4!important} @media only screen and (max-width:768px){ .sqs-col-3 {margin-left:0%!important; margin-bottom: 5%} } </style> Thank you! Scott
  17. Site URL: https://www.realestateanalyzers.com/buy-now Hi Everyone! I am creating a pricing table and am trying to get the link that adds a product to the cart and directs them to checkout. I have Express Checkout enabled and am able to get it to work by adding a button below the pricing table but is there a unique URL that I can add to the button within the table? See image below for screenshot of site. Site password: spreadsheet1 Thanks in advance!
  18. Site URL: https://goby-icosahedron-jc2m.squarespace.com/ Hello Friends! I'm trying to implement my design (attached) to Squarespace in the best way possible and I have a few quick questions. Here is the link, and password is circle20. I'm on the Business Plan. Any help would be very much appreciated 🙂 -- In ‘Upcoming Events’; Can I move the date a few pixels away from the event title? In ‘Recent Musings’; Can I set a different button style? (Black text on all white) Can I make two buttons closer to each other? In ‘Faura Newsletter’; Can I align text to left? Can I change the text color from grey to black? Can I move the button down the newsletter and center it? And finally, can I reformat the Sign Up button so that it matches the button at the top (under the cover image)? Right under the cover image, Can I make the text ('What is Faura?') upside-down (as in the original design) without using an image? Thank you so much in advance! All the best, Ozan
  19. I appreciate that the size of the button adjusts to the text, but from a design perspective, it looks bad. Is there a way to make the button size the same? I am using the Pacific template.
  20. Site URL: https://lupatrattoria.squarespace.com I would like to customize the background, button & text colors for the OpenTable block in my website. Right now the block background doesn't match the page color & the button is black instead of dark grey. Thanks!
  21. Site URL: https://GLOBALBLACKWOMENCC.ORG Hello, I have three issues and would appreciate help with any. 1. My client would like the "DONATE" tab on mobile menu to be shown on header and not hidden in mobile nav menu. On desktop we have two css buttons: donate and join here and one cta button: members access. 2. The p 1 bold text in homepage banner does not bold on the mobile view. 3. Minimize the white space between primary and secondary nav menu on mobile. website: www.globalblackwomencc.org Thanks for the help!
  22. Site URL: https://smilodon-ocelot-my5f.squarespace.com/desert-modern-1 Hi, How do I control the size of just this button only? (I need to make bigger to control the font size, padding and keyline of the button)
  23. Site URL: https://theweightofhonormovie.com Hello, Does anyone know how to add more than one button to the header in Squarespace 7.1? I'd like to add another white button next to the existing "Host A Screening" button. Thanks in advance!
  24. I'm using Squarespace 7.1 is there any way to make just the header navigation button to the"outline" style without changing the rest of the buttons? There's not an option for it in header button so I'm wondering if it has to be CSS. Something like: .header-actions-action .btn { style: outline !important; } Although, this CSS doesn't work of course 🤦‍♂️ Thanks!
  25. Site URL: https://sturgeon-goby-y5ad.squarespace.com/config/ I have followed the guide for brad goods for the multilanguage setup and have gotten it to work i was just wondering if its possible to make the language switcher constant as you scroll like the header can the language switcher be part of the header?
×
×
  • Create New...