Jump to content

Styling navigation button and primary button

Recommended Posts

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?

button effect.png

Link to comment
  • Replies 9
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

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>

Screenshot_3.thumb.png.0afe4ac2051e60bf5a237a519808ba59.png

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!)

Link to comment

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

button cropped.png

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.