button Styling navigation button and primary button

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>