Divi Snippet - Turn a menu link into a CTA button

de-menu_CTA_button.css

/* Menu CTA (Call to Action) button style, just make sure you add the class to the menu link */

/* Target elements with class 'de-menu-cta' */
.de-menu-cta {
    /* Set the background color of the CTA button */
    background-color: #0fe5a8; /* Change button background color here */
    /* Set the border radius of the CTA button (rounded corners) */
    border-radius: 50px; /* Set this to 0px if you want a square CTA button */
    -webkit-border-radius: 50px; /* For WebKit browsers (e.g., Safari) */
    -moz-border-radius: 50px;    /* For Mozilla browsers (e.g., Firefox) */
    /* Set the margin around the CTA button */
    margin: 10px 0;
    /* Apply a transition effect when changing the element's properties */
    transition: all 0.2s ease;
    /* Set the width of the CTA button to inherit from the parent element */
    width: inherit !important;
    /* Display the CTA button as an inline block element */
    display: inline-block !important;
}

/* Target 'a' (anchor) elements within elements with class 'de-menu-cta' */
.de-menu-cta a {
    /* Set the text color of the CTA button */
    color: #fff !important; /* Change button text color here */
    /* Align the text to the left within the CTA button */
    text-align: left;
    /* Set the padding around the text within the CTA button */
    padding: 10px 20px;
    /* Set the border radius of the 'a' element (rounded corners) */
    border-radius: 50px;
}