Jump to content

Drop Shadow Buttons

Recommended Posts

Site URL: https://www.storyflowe.com/

Hello, I have included a code on my CSS to create a drop shadow on my buttons:

.sqs-block-button .sqs-block-button-element--medium {
  box-shadow: 5px 5px #FF6969;
  transition: all ease-in .05s;
}

.sqs-block-button .sqs-block-button-element--medium:active {
  box-shadow: none;
  transform: translateY(4px) !important;
  transition: all ease-in .05s;
}

But that doesn't happen to all the buttons as you can see on my website. How can I apply that to buttons on the footer, header, form buttons and stuff like that?

 

Thanks

 

 

Link to comment

The first thing wrong is that you are using the selector for only medium buttons, which will exclude large or small buttons. The second thing to remember is that form buttons and buttons in the navigation have different class selectors in Squarespace, so I've included those in the following code snippet (.sqs-system-button).

Hope this helps!

.sqs-block-button .sqs-block-button-element, .sqs-system-button {
  box-shadow: 5px 5px #FF6969;
  transition: all ease-in .05s;
}

.sqs-block-button .sqs-block-button-element:active, .sqs-system-button:active {
  box-shadow: none;
  transform: translateY(4px) !important;
  transition: all ease-in .05s;
}

 

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment
13 hours ago, Caroline_Smith said:

The first thing wrong is that you are using the selector for only medium buttons, which will exclude large or small buttons. The second thing to remember is that form buttons and buttons in the navigation have different class selectors in Squarespace, so I've included those in the following code snippet (.sqs-system-button).

Hope this helps!

.sqs-block-button .sqs-block-button-element, .sqs-system-button {
  box-shadow: 5px 5px #FF6969;
  transition: all ease-in .05s;
}

.sqs-block-button .sqs-block-button-element:active, .sqs-system-button:active {
  box-shadow: none;
  transform: translateY(4px) !important;
  transition: all ease-in .05s;
}

Hello Caroline, thank you for your reply! I'm trying to wear a hat of writing code, so please excuse my little knowledge around it.

Your code worked perfectly and included every button except from the one on the header navigation bar. How can I put that as well? Also, which bit of my code in the first place includes only medium buttons and excludes small and big ones?

Thank you so much!

Link to comment
On 3/2/2022 at 9:07 PM, storyflow said:
On 3/2/2022 at 7:13 AM, Caroline_Smith said:

The first thing wrong is that you are using the selector for only medium buttons, which will exclude large or small buttons. The second thing to remember is that form buttons and buttons in the navigation have different class selectors in Squarespace, so I've included those in the following code snippet (.sqs-system-button).

Hope this helps!

.sqs-block-button .sqs-block-button-element, .sqs-system-button {
  box-shadow: 5px 5px #FF6969;
  transition: all ease-in .05s;
}

.sqs-block-button .sqs-block-button-element:active, .sqs-system-button:active {
  box-shadow: none;
  transform: translateY(4px) !important;
  transition: all ease-in .05s;
}

Hello Caroline, thank you for your reply! I'm trying to wear a hat of writing code, so please excuse my little knowledge around it.

Your code worked perfectly and included every button except from the one on the header navigation bar. How can I put that as well? Also, which bit of my code in the first place includes only medium buttons and excludes small and big ones?

Thank you so much!

Do you still need help?

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

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.