How do I create a "Button Slide Up on Hover" Effect in Squarespace 7.1?

Site URL: imdanielduncan.com

Hi,

I was wondering if there is any way I can create a "Slide up button on hover" effect in Squarespace like the one on https://www.mous.co/. A drop shadow on hover along with the slide up animation would be nice, but is not necessary.

I am on version 7.1 and have the Personal Plan.

Thanks!

@media (hover: hover)
.primary-button-style-outline .sqs-button-element--primary:hover, .primary-button-style-outline .sqs-button-element--primary.comment-btn:hover, .primary-button-style-outline .sqs-modal-lightbox .sqs-modal-lightbox-content .sqs-button-element--primary:hover, .primary-button-style-outline div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--primary:hover {
    background: var(--primaryButtonBackgroundColor);
    color: var(--primaryButtonTextColor);
    box-shadow: 0 2px 20px rgb(0 0 0 / 20%);
}

littel bit help for hover shodow

13 hours ago, Mdhanjal said:

@media (hover: hover)
.primary-button-style-outline .sqs-button-element--primary:hover, .primary-button-style-outline .sqs-button-element--primary.comment-btn:hover, .primary-button-style-outline .sqs-modal-lightbox .sqs-modal-lightbox-content .sqs-button-element--primary:hover, .primary-button-style-outline div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--primary:hover {
    background: var(--primaryButtonBackgroundColor);
    color: var(--primaryButtonTextColor);
    box-shadow: 0 2px 20px rgb(0 0 0 / 20%);
}

littel bit help for hover shodow

I put this code in the Custom CSS section and it said "Syntax Error on line 1"

.primary-button-style-outline .sqs-button-element--primary:hover, .primary-button-style-outline .sqs-button-element--primary.comment-btn:hover, .primary-button-style-outline .sqs-modal-lightbox .sqs-modal-lightbox-content .sqs-button-element--primary:hover, .primary-button-style-outline div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--primary:hover {
    background: var(--primaryButtonBackgroundColor);
    color: var(--primaryButtonTextColor);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

12 minutes ago, Mdhanjal said:

.primary-button-style-outline .sqs-button-element--primary:hover, .primary-button-style-outline .sqs-button-element--primary.comment-btn:hover, .primary-button-style-outline .sqs-modal-lightbox .sqs-modal-lightbox-content .sqs-button-element--primary:hover, .primary-button-style-outline div#Tock_widget_container>div.TockWidgetWrapper .TockButton-blue.sqs-button-element--primary:hover {
    background: var(--primaryButtonBackgroundColor);
    color: var(--primaryButtonTextColor);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

 

Awesome! That worked, thanks!

Do you know if there is any way to have the button slide up on hover as well? Or is that not possible

On 2/9/2023 at 7:55 AM, imdanielduncan said:

Awesome! That worked, thanks!

Do you know if there is any way to have the button slide up on hover as well? Or is that not possible

thank you