Divi Tutorial: How to change the rollover

Another Divi Tutorial for you; changing the rollovers.

The button rollovers for Divi theme are almost cool. I like the border and font size, I like the style. Then I rolled over it and it does some funk animation shit and a ‘>’ sign appears.


So lets get rid of that:

If you Inspect the button, you’ll see that around Line 120 on the Divi stylesheet, there are all the pseudo class “after” styles. Your looking for the “content” selector which happens to be “\35” that ‘>’ sign. So as per usual, we wanna copy that whole line and paste it into our Divi-Child stylesheet.

Now we can edit it:

So for that content edit, we want to remove “/35″ and leave it empty, but not deleted so it will read like this [content:””;]

That’s that removed.

Now to remove the sliding to the left animation:

Line 116 of the Divi stylesheet, we have the bits that are controlling the newsletter and promo button states. The lines below and above, thats where all the other button states are as well so look closely in there if you find there is a button you want to change that doesn’t seem to be changing.

So changing this newsletter button, the bit thats animating is the padding, so I simply copied the line across to my Divi Child styles removed the padding and now the button goes from White outline, to 5% opacity white background,. Which is fine for me. I can copy paste this and make different colour iterations if i wish.

That’s the gist of button tweaking, next up will be customising the signup forms!