brendanpeer Posted January 17, 2022 Posted January 17, 2022 Site URL: https://uk.thenueco.com/pages/survey Hi Does anyone know if it's possible to have customs buttons like the below example? https://uk.thenueco.com/pages/survey Thanks
Beyondspace Posted January 17, 2022 Posted January 17, 2022 55 minutes ago, brendanpeer said: Site URL: https://uk.thenueco.com/pages/survey Hi Does anyone know if it's possible to have customs buttons like the below example? https://uk.thenueco.com/pages/survey Thanks Do you mean this effect when hovering this menu? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> No-code customisations for Squarespace
brendanpeer Posted January 17, 2022 Author Posted January 17, 2022 Hi, Yes exactly, the hand drawn scribble rollover Thanks
brendanpeer Posted January 17, 2022 Author Posted January 17, 2022 Or id even take just the custom border with out the roll over of that's easier
tuanphan Posted January 19, 2022 Posted January 19, 2022 On 1/17/2022 at 11:13 PM, brendanpeer said: Or id even take just the custom border with out the roll over of that's easier Possible. If you share link to page where you want to apply effect, we can tweak above code on your site easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
brendanpeer Posted January 19, 2022 Author Posted January 19, 2022 Hi Tuanphan Thanks for replying. the site is www.heydaysworkshops.com password creative23 Thanks again
tuanphan Posted January 20, 2022 Posted January 20, 2022 15 hours ago, brendanpeer said: Hi Tuanphan Thanks for replying. the site is www.heydaysworkshops.com password creative23 Thanks again For Learn More button or all buttons in main content? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
brendanpeer Posted January 20, 2022 Author Posted January 20, 2022 Hi, For all buttons site wide Thanks
tuanphan Posted January 21, 2022 Posted January 21, 2022 20 hours ago, brendanpeer said: Hi, For all buttons site wide Thanks Try add to Design > Custom CSS (header button) a.btn:hover:before { content: ""; position: absolute; top: -25px; left: -35px; right: -40px; bottom: 0; display: block; background-image: url(//cdn.shopify.com/s/files/1/0253/3661/0863/t/61/assets/icon-sketch-circle.svg?v=1365897…); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } a.btn:hover { background-color: Transparent !important; color: black !important; border: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
brendanpeer Posted January 21, 2022 Author Posted January 21, 2022 Hi, No, unfortunately that hasn't worked? Thanks
tuanphan Posted January 22, 2022 Posted January 22, 2022 On 1/21/2022 at 6:39 PM, brendanpeer said: Hi, No, unfortunately that hasn't worked? Thanks I see it worked here Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
brendanpeer Posted January 22, 2022 Author Posted January 22, 2022 Oh yeah amazing, can it be site wide? Thanks so much for your help here
Solution tuanphan Posted January 25, 2022 Solution Posted January 25, 2022 On 1/22/2022 at 7:37 PM, brendanpeer said: Oh yeah amazing, can it be site wide? Thanks so much for your help here It just a test code for header button. Use this new code for header button, button blocks button a.btn:hover:before, .button-block a:hover:before { content: ""; position: absolute; top: -25px; left: -35px; right: -40px; bottom: 0; display: block; background-image: url(//cdn.shopify.com/s/files/1/0253/3661/0863/t/61/assets/icon-sketch-circle.svg?v=1365897…); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } a.btn:hover, .button-block a:hover { background-color: Transparent !important; color: black !important; border: none !important; } .button-block a { display: inline-block; position: relative; } Currently I only see these 2 types of buttons on your site. If you use other types (list button, image block button, input button..) you can share link to page where you added them, I can check code eaiser Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
brendanpeer Posted January 28, 2022 Author Posted January 28, 2022 THAT WORKED! thank you so much for your help with this
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment