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. Yuk! So lets get rid of that: If you Inspect […]
1 min read

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 comments 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 Reply

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

Recent Posts

April 24, 2021
How to develop a reliable and consistent brand for creators

A consistent brand is one of the most important elements in any industry. When people expect to see a certain type of product each day, they have to recognise that brand and choose to support it.

Read More
April 16, 2021
XP Pen Deco Pro better than Wacom Intuos Pro?

The XP Pen Deco Pro was released in 2018 with its sights firmly set on dethroning the Wacom Intuos Pro, has it done it, for half the price?

Read More
April 5, 2021
How To Build A Remarkable Personal Brand with Video

Video is massive, and it's only getting bigger each year. In this post I'm going to be exploring what we can do with video to build your personal brand.

Read More

Like free stuff?

I'm working on a free Content Creator Kit. You'll get a bunch of design elements to help design and brand your online presence... Sign up with the button below to be one of the first to get it!
SEND ME THE KIT
Design & content © 2021 Chris Hart. All Rights Reserved
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram