Rev Slider - Button shadow

Support
#1

Hi,

I have search but couldn’t find a solution to my problem.
How can I add a shadow to a Rev Slider button?

Thank you

#2

Hi there,

Thanks for writing in.

Is it text shadow or box shadow? You can add CSS to your layers and buttons, please check this https://www.themepunch.com/faq/custom-layer-css/, then add this CSS to your button

{
-webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,1);
box-shadow: 2px 2px 2px 2px rgba(0,0,0,1);
}

You can use this online tools to generate a CSS for you.

http://css3generator.com/

Thanks!

#3

Hi Rad,

Thank you for your reply.
Unfortunately that didn’t work.
Any other solution?

I have two other issues:

  • There is a Shape Layer (white box) that for some reason doesn’t load (front end) with the rest.
  • The fonts that I use are “converting” to italic on the front end.

Thank you

#4

Hi there,

I checked your slide and for some reason, it needed to have the !important directive in the code to make it work, so I added that and the code is now:

{
	-webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,1) !important;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,1) !important;
}

The result in the front end of the website is:

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#5

Hi,

Thank you but there’s still an issue, the shadow worked, but after hover over the button, the shadow disappears.

(I will open a new thread for the other questions)

#6

Hi there,

The layer style keeps getting overridden by the default style.

Try adding a class to the button layer instead. You can add a class to the button when you click on the button layer then click on Attributes then add a value to the classes field.

Let’s say the class you added is my-btn, then go Slider Settings > Custom CSS then add this code:

.my-btn.rev-btn {
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.35) !important;
	box-shadow: 0px 5px 10px 10px rgba(0,0,0,0.20) !important;
}

https://www.themepunch.com/revslider-doc/layer-attributes/

Hope this helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.