Drop Shadow Buttons

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

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;
}

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!

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?