Add CSS Button to Membership Area

Add CSS Button to Membership Area

February 01, 20231 min read

Add a clickable button to your membership area courses.

Custom HTML/CSS/JAVASCRIPT

Button Content Code:

Sites> Memberships>Settings>Site Settings> Custom JS

(Paste everything between the solid lines)

______________________________________________________________________________

var ButtonName = "Button Title"
var ButtonLink = "Button URL"

var body = document.querySelector("body");
body.addEventListener("DOMNodeInserted", function(event) {
    var postPlaylistContainer = document.querySelector(".post-playlist-container");
    if (event.target?.id "product-breadcrumbs" || event.target?.id "post-completion-button") {

        //Code Test
        console.log("Code Working Fine")

        //New Element Create For DOM Insert
        var newPromotElement = document.createElement("div");
        newPromotElement.classList.add("post-materials-container", "block", "mt-5");

        //Button link Create 
        var New_Button_URI = document.createElement("a");
        New_Button_URI.target = "_blank";
        New_Button_URI.href = ButtonLink;
        newPromotElement.appendChild(New_Button_URI);

        //Create New Button 
        var newButtonElement = document.createElement("button");
        newButtonElement.id = 'Custom-BTN';
        newButtonElement.textContent = ButtonName;
        New_Button_URI.appendChild(newButtonElement);

        //DOM inserted Here
        postPlaylistContainer?.appendChild(newPromotElement);
    }
}, false);

_________________________________________________________________________________

Button Style Code:

Sites> Memberships>Settings>Site Settings> Custom CSS

(Paste everything between the solid lines)

______________________________________________________________________________

#navigation-header{
    background: #fff !important; 
}

#Custom-BTN{
    width: 100%;
    text-align: center;
    background: #FFB758;
    padding: 1rem;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
}

____________________________________________________________________________

🙋HAVE QUESTIONS?

To access the High Level knowledgebase: CLICK HERE

 Join us for open office hours (Free to everyone): Join Us
Join us for our weekly QA session (Members Only): Join Us
Book a private consultation (Build It With Me): Book Here


I am the CEO and Founder of My Vision Agency, a program where business owners can learn to scale their Vision with A.I.

Bridget Bartlett

I am the CEO and Founder of My Vision Agency, a program where business owners can learn to scale their Vision with A.I.

Back to Blog

Other Resources

Managed by Vision Marketing and Design LLC