evanlemmons Posted August 31, 2016 Share Posted August 31, 2016 I want to create a button with an icon in it but I want it to look identical to all the standard buttons on the site and have it change colors/fonts as the admin changes it in the Squarespace back end. Here's the code I'm using (copied directly from the source for a standard button) <div class=“sqs-block button-block sqs-block-button”> <div class=“sqs-block-content”> <div class=“sqs-block-button-container--center”> <a href class=“sqs-block-button-element--large sqs-block-button-element”> <i class="ion-hammer"></i> <span>See The Architect Plans</span> </a> </div> </div> </div> And it's not styling at all when I past that into a code block. Any help would be appreciated. Link to comment
SypherVox Posted February 10, 2017 Share Posted February 10, 2017 This isn't exactly answering that question and I've had similar issues but I stopped messing with it after I came across this site with every button animation and style you could think of specifically built for Squarespace. It come with a designer tool and allows you to even style the form and newsletter buttons as well. Pretty sweet. You see all of them here http://www.thecustomsquare.com/plugins/buttons @evanlemmons Link to comment
Amolla Posted May 20, 2017 Share Posted May 20, 2017 Hey @evanlemmons (and whoever else was looking for this)! I was trying to do the same thing. Disclaimer : I have zero knowledge in coding. I just used www.w3schools.com to get some basic knowledge and use their exercices to cobble together the code by trial and error. Here's what I came up with : <!DOCTYPE html> <html> <head> <style> .button { float: right; background-color: white; border: none; color: white; padding: 1px 12px; text-align: center; text-decoration: none; display: inline-block; font-family: Source Sans Pro; font-size: 12px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 3px; margin-top: 56px; margin-bottom: 12px; margin-right: 20px; margin-left: 12px; cursor: pointer; } </style> </head> <body> <h3><a href="/en/transcription" class="button">ENGLISH</h3></a> </body> </html> I was trying to make a translate button, that's why mine says "English", but your could just put in whatever values you need. Mine was for the Om template. I used the Code Injection section in "Avanced" in the page properties. It shows up as a white button on the top right of the screen, with the same font as a small button in Om. In order to find the font formatting for a small button in Om, I created one and then previewed the page, right-clicked on the button and clicked on Inspect element (in Chrome). Link to comment
khayrab Posted January 7, 2018 Share Posted January 7, 2018 LOVE THIS! The hyperlink doesn't work though for some reason. Will update if I figure it out. Link to comment
khayrab Posted January 7, 2018 Share Posted January 7, 2018 Unfortunately I couldn't figure it out. No hyperlink injected into the header of my cover page works. I ended up making a simple link within the text of the given space http://alfkalimah.com/ar/home Amolla's code made such a pretty button, though :( Link to comment
philmace Posted July 22, 2019 Share Posted July 22, 2019 There is an easy way for dummies. Put a button on the post/page and then copy the code that is created then paste the code via code insert. Now you can input a click to call button Link to comment
ipratt Posted June 23, 2020 Share Posted June 23, 2020 On 7/22/2019 at 12:54 AM, philmace said: There is an easy way for dummies. Put a button on the post/page and then copy the code that is created then paste the code via code insert. Now you can input a click to call button How do you copy the code that's created? I did dev tools -- inspect -- but not sure what I'm looking for? Link to comment
IIIJQIII Posted August 31, 2020 Share Posted August 31, 2020 On 8/31/2016 at 11:42 AM, evanlemmons said: I want to create a button with an icon in it but I want it to look identical to all the standard buttons on the site and have it change colors/fonts as the admin changes it in the Squarespace back end. Here's the code I'm using (copied directly from the source for a standard button) <div class=“sqs-block button-block sqs-block-button”> <div class=“sqs-block-content”> <div class=“sqs-block-button-container--center”> <a href class=“sqs-block-button-element--large sqs-block-button-element”> <i class="ion-hammer"></i> <span>See The Architect Plans</span> </a> </div> </div> </div> And it's not styling at all when I past that into a code block. Any help would be appreciated. How can I change the color of the text when hovered? Thanks!! JQ Link to comment
tuanphan Posted September 1, 2020 Share Posted September 1, 2020 17 hours ago, IIIJQIII said: How can I change the color of the text when hovered? Thanks!! JQ Add to Home > Design > Custom CSS .sqs-block-button-element:hover a {color: green !important;} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.