IsaWP Posted June 22 Share Posted June 22 Hi, I'm looking to style the buttons to look like this with the hover effect as seen in this link https://codepen.io/electerious/pen/qPjbGm I would need to style the button at the end of the navigation menu, newsletter/form sign up button and the normal buttons. The code is in the link but I'm struggling to use it to target the buttons in squarespace. I'm testing it out on a new 7.1 site build. Can anyone help? Link to comment
0 tuanphan Posted June 23 Share Posted June 23 What is your site url? We can test code easier 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
0 IsaWP Posted June 24 Author Share Posted June 24 https://harpsichord-arugula-gwbj.squarespace.com/ pw: circlepizza64 I found this site that seems to have implemented it on squarespace so it is possible, I just don't know enough to figure it out. https://www.arielokin.com/ Link to comment
0 tuanphan Posted June 25 Share Posted June 25 17 hours ago, IsaWP said: https://harpsichord-arugula-gwbj.squarespace.com/ pw: circlepizza64 I found this site that seems to have implemented it on squarespace so it is possible, I just don't know enough to figure it out. https://www.arielokin.com/ Add to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $('body .sqs-block.sqs-block-button .sqs-block-button-element').append('<span></span>'); }); </script> <style> .sqs-block.sqs-block-button .sqs-block-button-element { position: relative; display: inline-block; text-transform: uppercase; color: #93b9e1; border: 1px solid #93b9e1 !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; z-index: 0; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; background: none; text-decoration: none } .sqs-block.sqs-block-button .sqs-block-button-element--large { padding: 20px 45px; font-size: 14px } .sqs-block.sqs-block-button .sqs-block-button-element::before { content: ''; border-top: 1px solid #93b9e1; border-bottom: 1px solid #93b9e1; position: absolute; width: calc(100% + 12px); height: 100%; top: -1px; left: -6px; -webkit-transition: transform .8s ease; -moz-transition: transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; will-change: transform } .sqs-block.sqs-block-button .sqs-block-button-element::after { content: ''; border-left: 1px solid #93b9e1; border-right: 1px solid #93b9e1; position: absolute; width: 100%; height: calc(100% + 12px); top: -6px; left: -1px; -webkit-transition: transform .8s ease; -moz-transition: transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; will-change: transform } .sqs-block.sqs-block-button .sqs-block-button-element span::before { content: ''; border-top: 1px solid #93b9e1; border-bottom: 1px solid #93b9e1; position: absolute; width: 100%; height: calc(100% + 10px); top: -6px; left: 0; bottom: -6px; -webkit-transition: transform .8s ease; -moz-transition: transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; will-change: transform } .sqs-block.sqs-block-button .sqs-block-button-element span::after { content: ''; border-left: 1px solid #93b9e1; border-right: 1px solid #93b9e1; position: absolute; width: calc(100% + 10px); height: 100%; top: 0; left: -6px; -webkit-transition: transform .8s ease; -moz-transition: transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; will-change: transform } .sqs-block.sqs-block-button .sqs-block-button-element:hover { border: 1px solid #93b9e1 } .sqs-block.sqs-block-button .sqs-block-button-element:hover::before { transform: scalex(0) } .sqs-block.sqs-block-button .sqs-block-button-element:hover::after { transform: scaley(0) } .sqs-block.sqs-block-button .sqs-block-button-element:hover span::before { transform: scalex(0) } .sqs-block.sqs-block-button .sqs-block-button-element:hover span::after { transform: scaley(0) } </style> 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
0 IsaWP Posted June 25 Author Share Posted June 25 That's great, thank you! Is there a way to apply this to other buttons on the site like the call to action in the nav bar, newsletter, forms, shop buttons etc Link to comment
0 tuanphan Posted June 26 Share Posted June 26 With nav button, try this new code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $('body .sqs-block.sqs-block-button .sqs-block-button-element').append('<span></span>'); $('header#header a.btn').append('<span></span>'); }); </script> <style> .sqs-block.sqs-block-button .sqs-block-button-element, header#header a.btn { position: relative; display: inline-block; text-transform: uppercase; color: #93b9e1; border: 1px solid #93b9e1 !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; z-index: 0; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; background: none; text-decoration: none } .sqs-block.sqs-block-button .sqs-block-button-element--large, header#header a.btn { padding: 20px 45px; font-size: 14px } .sqs-block.sqs-block-button .sqs-block-button-element::before, header#header a.btn::before { content: ''; border-top: 1px solid #93b9e1; border-bottom: 1px solid #93b9e1; position: absolute; width: calc(100% + 12px); height: 100%; top: -1px; left: -6px; -webkit-transition: transform .8s ease; -moz-transition: transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; will-change: transform } .sqs-block.sqs-block-button .sqs-block-button-element::after, header#header a.btn::after { content: ''; border-left: 1px solid #93b9e1; border-right: 1px solid #93b9e1; position: absolute; width: 100%; height: calc(100% + 12px); top: -6px; left: -1px; -webkit-transition: transform .8s ease; -moz-transition: transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; will-change: transform } .sqs-block.sqs-block-button .sqs-block-button-element span::before, header#header a.btn span::before { content: ''; border-top: 1px solid #93b9e1; border-bottom: 1px solid #93b9e1; position: absolute; width: 100%; height: calc(100% + 10px); top: -6px; left: 0; bottom: -6px; -webkit-transition: transform .8s ease; -moz-transition: transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; will-change: transform } .sqs-block.sqs-block-button .sqs-block-button-element span::after, header#header a.btn::after { content: ''; border-left: 1px solid #93b9e1; border-right: 1px solid #93b9e1; position: absolute; width: calc(100% + 10px); height: 100%; top: 0; left: -6px; -webkit-transition: transform .8s ease; -moz-transition: transform .8s ease; -o-transition: transform .8s ease; transition: transform .8s ease; will-change: transform } .sqs-block.sqs-block-button .sqs-block-button-element:hover, header#header a.btn:hover { border: 1px solid #93b9e1 } .sqs-block.sqs-block-button .sqs-block-button-element:hover::before, header#header a.btn:hover::efore { transform: scalex(0) } .sqs-block.sqs-block-button .sqs-block-button-element:hover::after, header#header a.btn:hover::after { transform: scaley(0) } .sqs-block.sqs-block-button .sqs-block-button-element:hover span::before, header#header a.btn:hover span:before { transform: scalex(0) } .sqs-block.sqs-block-button .sqs-block-button-element:hover span::after, header#header a.btn:hover span:after { transform: scaley(0) } </style> 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
0 IsaWP Posted June 27 Author Share Posted June 27 It almost works. There is just some disconnect with some of the lines. You've already helped me so much so I don't want to keep bothering you, but do you know which bit of code I should be looking at to try and fix this? Thanks! Link to comment
0 tuanphan Posted June 30 Share Posted June 30 Try adding this CSS under <style> .sqs-block.sqs-block-button .sqs-block-button-element span::before, header#header a.btn span::before { border: 1px solid #93b9e1; } </style> 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
Question
IsaWP
Hi, I'm looking to style the buttons to look like this with the hover effect as seen in this link https://codepen.io/electerious/pen/qPjbGm
I would need to style the button at the end of the navigation menu, newsletter/form sign up button and the normal buttons.
The code is in the link but I'm struggling to use it to target the buttons in squarespace.
I'm testing it out on a new 7.1 site build.
Can anyone help?
Link to comment
Top Posters For This Question
4
4
Popular Days
Jun 25
2
Jun 26
1
Jun 22
1
Jun 27
1
Top Posters For This Question
IsaWP 4 posts
tuanphan 4 posts
Popular Days
Jun 25 2022
2 posts
Jun 26 2022
1 post
Jun 22 2022
1 post
Jun 27 2022
1 post
Posted Images
7 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment