To add a CTA button (Call to Action) is fairly simple.
You just need to include a piece of code into the menu tab css options area: menu-cta
Then you just need to all a bit of CSS to the Divi CSS area.
There is a great tutorial by Josh Hall on how to do this here.
It will take a little editing of the CSS to change the colours to work with your site but it’s pretty easy to do.
You may also need to edit the padding, again easily done.
I’ve added Joshs code below…
This will work well on a dark menu bar, on a light menu bar get the code from Switch MSP and chage out the green.
/*---------------Menu CTA Button---------------*/
#top-menu li a:hover {opacity:
1
!important
;}
.menu-cta a {
border
:
2px
solid
#ffffff
4
f
!important
;
padding
:
12px
!important
;
border-radius:
25px
;
text-align
:
center
;
}
.menu-cta a:hover {
background-color
:
#8dc63f
;
color
:
white
!important
;
}
.et_header_style_left #et-top-navigation {
padding-top
:
16px
!important
;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top
:
6px
!important
;
}
/*---------------CTA Button Color on Fixed Navigation---------------*/
#main-header.et-fixed-header .menu-cta a {
color
:
#fff
!important
;
}
/*---------------Menu CTA Button Mobile Settings---------------*/
@media only
screen
and (
max-width
:
980px
) {
.menu-cta a {
background-color
:
#8dc63f
;
}
}