[Resolved] Shadow hover on every button

[Manpreet]

I want to add a shadow effect on every button on my website, including the post-comment button in the comment area. Also, provide code for hover shadow effect on each button.

[Fernando]

Hi Manpreet,

For reference, can you provide the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Manpreet]

https://animefirm.com/top-5-isekai-anime-in-january-2023/

[David]

Hi there,

try this CSS:

button, a.button, a[role="button"], input[type="submit"] {
    box-shadow: 0px 5px 7px 0 rgba(0,0,0,0);
    transform: translateY(0);
    transition: all 0.3s ease !important;
}
:is(button, a.button, a[role="button"], input[type="submit"]):hover {
    box-shadow: 0px 5px 7px 0 rgba(0,0,0,.25);
    transform: translateY(-2px);
}

[Manpreet]

Can you also provide me with CSS code to create this hover shadow effect for featured images on the homepage of the website

[David]

Try this CSS:

.content-area .inside-article .post-image img {
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0);
    transition: all 0.3s ease-in;
}
.content-area .inside-article .post-image img:hover {
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,.25);
}

[Author]

Posts