button Styling navigation button and primary button

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?

What is your site url? We can test code easier

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/

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>

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

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>

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!

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>

Hi @tuanphan! Thanks so much for the codes above - by any chance might you know how to implement for form buttons or carousel lists? :)

15 hours ago, ellievoci said:

Hi @tuanphan! Thanks so much for the codes above - by any chance might you know how to implement for form buttons or carousel lists? 🙂

Can you share link to this page?