Divi Tutorial: How to change the rollover

Change the Rollovers of Divi

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.

Yuk!

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!

6 thoughts on “Divi Tutorial: How to change the rollover”

  1. Hi,
    Would it be possible to set a few different button colour schemes? I’m trying to use the CTA button to link to sign up pages but would like them to be colour coded and ideally with no background just like the first rollover in your image above.
    eg. buy this – red
    buy that – blue
    buy the other – green

    My work in progress is digin-bristol.com
    Thanks if you can help, if not thanks for posting how to change the rollover.
    Al

    1. Hey Alex, should be pretty simple – This should do it I think, basically we are creating a class to add to one of the buttons, i’m taking the red one as an example, you’d just duplicate this and add in blue and green colours.

      .redbutton {
      color: #ff0000 !important; /* this is red colour you’ll be using */
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      border-radius: 0px;
      border: 2px solid #000;
      padding: 6px 25px;
      line-height: 1.7em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -moz-transition: all 0.2s;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      position: relative;
      }
      .redbutton:hover {
      background: #000 !important; /* This is the hover colour */
      color: #fff !important;
      border: 2px solid #000;
      padding: 6px 25px !important;
      }

      1. Hi Chris,
        That’s great thanks. It’s not strictly a rollover button, but would you have any idea how to remove the large white rectangle attached to my shopping cart widget on the top left of my page? It’s not the image as it was there before I put it there.
        Thanks again
        Alex
        http://www.digin-bristol.com

        1. Your pages are password protected so can’t see but if you right click and inspect that area, hopefully you can narrow down whats causing the white rectangle – it’ll probably be a background colour set to white, something along those lines!

  2. I have been looking for this fix for a while. Divi is great, but it has so many weird oddities to it’s styling and css. Thanks for this!

Leave a Comment

Your email address will not be published. Required fields are marked *