Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Styling navigation button and primary button


IsaWP

Question

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
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

  • 0
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

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

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

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

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
  • 0

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

Create an account or sign in to comment

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


×
×
  • Create New...