The easy way
In the menu, add this as the navigation label
<span class="hws_menu_cta">Book now</span>Code language: HTML, XML (xml)
And add this to the custom CSS
/* -- START menu item CTA -- */
.hws_menu_cta {
background: #8C734A;
color: #ffffff;
padding: 7.5px;
}
.hws_menu_cta:before {
content: "\e023";
font-family: 'ETmodules' !important;
padding-right:3px;
}
/* -- END menu item CTA -- */Code language: CSS (css)
Josh Hall’s way
Primary menu, rounded corners
Source: https://joshhall.co/how-to-create-call-action-button-for-the-divi-menu/
/*---------------Menu CTA Button---------------*/
.menu-cta a {
border: 2px solid #ffffff4f!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;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 6px;
}
/*---------------Menu CTA Button Mobile Settings---------------*/
@media only screen and (max-width: 980px) {
.menu-cta a {
background-color: #8dc63f;
}
}Code language: CSS (css)
Geno’s way
Sources
- https://www.facebook.com/groups/DiviThemeUsers/permalink/781588078637457
- https://quiroz.co/transform-a-divi-menu-item-into-a-cta
In the menu, add this as the navigation label
<span class="et_pb_more_button et_pb_button">Button Text</span>Code language: HTML, XML (xml)
This follows the default button styling from the theme customizer. To change that, add this to the custom CSS and change where needed
/* -- START Menu CTA Button -- */
#et-top-navigation .et_pb_button {
margin-top: 0px;
font-size: inherit;
font-weight: inherit;
color: #007000 !important;
background: #FDFCFC !important;
border: 2px solid #007000 !important;
}
#et-top-navigation .et_pb_button:hover {
color: #007000 !important;
border: 2px solid #007000 !important;
}
#et-top-navigation .et_pb_button:after {
font-size: 23px;
}
/* -- END Menu CTA Button -- */Code language: CSS (css)