How to create a Divi button arrow animation on hover?

Puneet Sharma

4 years ago

Today, I got a situation where I needed to create a Divi button animation on the hover of the last list item of the header menu. I planned to make it like we have for other DIVI buttons through CSS and using DIVI Icon Font Library.

Here’s the code that worked for me:

#top-menu > li:last-child > a:after {
    content: '=';
    color: #fff;
    font-family: 'ETmodules'; // Included already in divi
    opacity: 0;
    position: absolute;
    transition: all 300ms ease 0ms;
    color: #333333!important;
    font-size:12px;
    margin-left: -1em;
}
#top-menu > li:last-child:hover > a:after {
    left: auto;
    margin-left: .3em;
    opacity: 1;
    transition: none;
}