Jump to content

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

Recommended Posts

  • Replies 5
  • Views 959
  • Created
  • Last Reply

Top Posters In This Topic

@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

Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

Link to comment
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"

Link to comment
.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;
}

 

Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

Link to comment
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

Link to comment
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 

Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

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...

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.