How To Add Custom Buttons To Your MV

Welcome to the summer series of Page Design tutorials!  In this episode we'll embed some "Buy Now" buttons and take a look at a few options to customize them.

In this post below, please find the Links mentioned on video, the example code from the episode, the Audio podcast, and the text Transcript.

Now, we realize this may seem intimidating for a lot of people, so we've set up a special program to help.

GET HELP FROM A PRO

Want some detailed help in how to customize your own MV with buttons, page design elements and more? 

Join our MV code expert Juci Kisistok in her Summer of CSS Magic series that you can find HERE.

Thanks for joining us!

LINKS

https://courses.vipmembervault.com/css-library

https://codeglitter.vipmembervault.com/products/courses/view/48

https://htmlcolorcodes.com/color-picker

https://courses.mixitecture.com/mixing

https://membervault.elevio.help/en/articles/164-how-to-create-a-custom-button-on-your-product-page-using-css

CODE EXAMPLE 1: Basic Button

BUY NOW

Enter the following HTML code to get this button.  

Change the URL to direct people to your MV Product.

Change the text "BUY NOW" to be the CTA which fits your Offer.

CODE EXAMPLE 2: Centered Button

Use the following code to get this button (change URL and CTA).

CODE EXAMPLE 3: Button Color

Use the following code to get this button (make sure to scroll right and select All).

code details: style="background: #05383D; color: white; border: 2px solid #05383D;"

background: responsible for changing the background color of your button 

*You can swap the color code (#05383D) to your own brand color

color: change the color of the button text 

border: controls the width and color of the button's border. In the case of the code above, your button will have a solid border that is 2px wide and has the exact same color as your button's background color. 

CODE EXAMPLE 4: Border & Text Color

Use the following code to get this button:

NOTE: add the following to your MV link to make it open the checkout page:

/?action=signup

Full link:

https://courses.mixitecture.com/products/courses/view/12/?action=signup

You can find this link from the Gear icon in your Products list :) 

CODE EXAMPLE 5: Full Width Button

Use the following code to get a full-width button.  (Note the "width" element is set to 100%).

PRO TIP

Always keep a second browser Tab open when you're editing your site.

Use it to immediately preview your edits, every time you make a change. 

If something appears broken or unexpected, you can easily revert to the previous edit and not go too far wrong.

EPISODE AUDIO

EPISODE TRANSCRIPT

Hey everybody, I'm Steve knots. Welcome to the User Experience podcast. And today is the first episode of our summer programming series on how to design pages using some CSS code and HTML custom code, which actually, believe it or not, is very doable for you as an MVC user. And this series, which is going to take about two months, is going to be the guideline, where I take you through and show you how to build this stuff inside your MV account without breaking anything.

Last week, during the introduction, I did a little review of how to backup your code. And during the code editor mode, copy and paste, put it in a safe place, so you don't delete anything important. And now that you know how to backup your stuff, we are free to play around and do some interesting edits on our pages. For example, today, custom buttons, you can see there's a signup here button right here, I can click it to open the checkout cart directly on my MemberVault product. And I'm going to show you how to get this button and where to do the edits so that it shows up on your page.

Now the first thing is, we already have a guide in the knowledge base about how to create a custom button on your product page using CSS, you can go to this page right now and copy some code and put it in. And that'll get you a button basically. So really, what I'm doing today is showing you what I did to get this button, and some other options you can play with to get some different buttons. We'll go through that in this podcast. And you're gonna see the back end of what it looks like when you're making this. So you don't get confused about the process.

Now, I said this is part of a series, we are doing a summer series for June and July, every week, I'm showing you another little aspect of building a page with custom code. And I want you to know, this is stuff I just learned within the last year, you don't have to be a programming genius. You don't have to be a code expert, you can be a totally normal, regular whatever person and do this stuff successfully. And for help, we have a master post on the on the MemberVault blog, it's called the CSS library where you will be able to find links to all of these other posts that we're doing to find all the tips in one place. So you don't have to go looking all around the Facebook group and trying to find the what date it was, it's all going to be here in one place.

And the really exciting thing is that for people who want to learn this stuff at a deeper level, our friend Juci is doing a guided tour with live workshops, custom code to help you with your site where you could ask her questions, get specific help on changing the colors or whatever. And she's doing it in her summer of CSS magic workshop, which is a paid product with scheduled workshops where she's gonna go in detail with all this stuff. That's Juci, she's so smart. She told me tons of stuff about coding, and she's really the person you want to talk to. So I'm giving you a tour of what's possible. And just showing you kind of what it looks like when I do it. What you really need to do is click into the link for the summer of CSS magic, which you'll find underneath this video and talk to you see get into her program and get help from her about how to do this stuff to really make it work. And let me tell you, the price of her workshop is so much less than paying some code expert to come into your site and design your stuff and charging money. Don't go down that route, talk to talk to people we know and get some help from someone who's going to actually be good at number vault and get you to the result you want.

So enough of the product pitch. There's the sign up here button, here is the knowledgebase article. And this link will be in my post under the video. So let's look at a couple of basic buttons and how to make them. So this button page is just a demo page. I started with a blank page and paste it in a little bit of stuff to make buttons. Here I am in the page editor. And notice it says on top example, one basic button, you can see by now which is the button text, and then enter the following HTML code. That's what I see in the back end. Here's what that looks like on the page on the button page example one basic button, enter the following HTML code. And this is not even CSS, this is just one line of text like this. This is what I mean when I say HTML code. Notice that the link is something you're going to want to change to go to your product or whatever you're going to a landing page or something. And then the text by now in here is what's going to show up on the surface of your button. And when I'm in my code mode, or in my admin side, you're going to want to hit the source code. Button.

This looks like a lot of stuff. But don't worry, it's not that bad. Here is the part that matters. Just like that. The way you see it right there. The P is a little paragraph that makes a new line. A href is a tag that means that link class tells you that it's a custom button, by now is the text, then you end A and P with a little slash. Those are like the brackets around the HTML code. And that's all you need to know is you're going to copy and paste the text from under this thing and paste it into your page. Just like we have on here. On the help docs. Here's the basic code, a href that's a hyperlink reference.

Put your checkout link here. Class Custom Button primary button by now is the text on the button. So this is already here in the MemberVault helpdocs waiting for you. And they even have red text out there which looks cool. And here's my button and it says buy now let's see what we get when we purchase this product. No reason why Can't have a little bit fun here. Oh, is it gonna be a YouTube video? Yes, I just did that. No reason we can't have a little bit of fun. So, notice that on the page, it looks pretty, pretty clean. Read my page go preview. There's not a lot of text on here that you see, you see example one, there's a button. And then there's three sentences, okay?

When you enter code mode, it can get I understand it can get intimidating because the words example one or surrounded by the h2 thing. There's the link. And then there's all this other stuff that it's a little bit hard to visually read it when you're in the code editor. So I recommend you just don't avoid that whole section, you don't have to read that stuff. You can just from everything I did in here, I just typed like a normal product. And, you know, like, for example, to select Heading Two, and use these drop down menus to create the style that I want it. So that was our basic button over here. Now, example two is a centered button, you can see that the by now the words are centered halfway across the screen, use the following code to get this button. Now it's edited my code, so I can't show you that exactly on screen.

Here's Example two centered button, there is the call to action text by now let's go into code mode and see what happened. That's different example to centered button. The only thing that's different here is the center tag, just like this. And the part that I wanted to show you on screen use the following code to get this but it is that code right there. MemberVault is so smart, it actually did an automatic update to change my code into a button. What I wanted to show you on screen is this you have the two little brackets are like they're called a tag. And they tell the program to do something. So this tag is called the center tag, it just says put the button in the center. And after that everything else is the same. You've got the link class and the button primary button, the by now text, and it's in the center. Now just to show you how easy this is. Example to centered button. And text by now, you could come in here and say buy now. Buy it right now. And it shows like that.

But you don't even have to do that if you're careful about where you're selecting buy this amazing thing right now. You can even update your button call to action. Right there on screen example three example to Senator button by this amazing thing right now. And then people example three example to Senator button by this amazing thing right now. And then people can click it. And if you really want to get crazy amazing, is now bold faced just with the set standard text editing tools, and refresh by this amazing thing right now and I bold faced one word inside that button. I don't know if that's going to be something you're interested in. But I'm just trying to show you where you edit these parameters. If you're interested in playing with them, then I have a little thing, use the following code to get this button you can see the number of authors automatically trying to make this into a button. It doesn't like you to post to paste the code in the text editor. Because most situations people are not trying to visually show you the code. They just want the code to work and you visually see the button. So this tutorial is getting a little weird. But the point is we're going to give you this code in a place you can copy and paste it just like this. Just like you see in the knowledge base, there was a line of code and then after that, it would be like the line the word centers.

So if you're all still with me, let's keep going in our demonstration, we looked at a basic button up top that just takes it automatically takes the color settings from your site and applies them to the button that by now has boldface. Then we looked at a centered button where you can have it appear in the center of your screen and the button naturally adapts to take the width of the text inside it. Now what if you want to change the color of the button you can see this Buy Now button is a different color. Where does this button go? Ha HTML color codes I'm going to give you a link to this site, which will give you the tools to pick a color you want and get the little line of letters that tell you what that color is called in programming language.

Let's go back to that page. And so now the Buy Now button is going to have some special details. So let's go into our source code and see what do we do to get button color. Now I'm sort of familiar with how to scan this visually. What I was looking for is the all caps letters example three button color. Now we have the first tag is center to put it in the center. Then we have a link which goes to the color picker thing. Then we have the class it's this is the see CSS reference that tells MemberVault to make a custom button. But look at these parts style Background Color white border to pixels. And there are some hashtags with numbers and things on there. All right, use the following code to get this button, I'm going to paste in just that part of the of the code. So code details style color border, the background or background color border, the background is changing the background color of your button, you can swap that little thing of six digits, hex code to any color you want, then color is going to change the field called color is going to change the color of the button text. And then border controls the width and color of the button border. So for the background, we have this 05383D, which makes that kind of dark green color.

For the text, it just says color white, and you're apparently allowed to write that color word. And then border two pixels solid. And notice that this field is the same as the background color. And in the notes here, it says border controls the width and color of the buttons border, in case of the code above your button will have a solid border that's two pixels wide, and has the exact same color as your buttons background color. You may recognize some of this from do the tutorial in the knowledge base article. So I'm trying to use references that you already have access to where you can go for more support if you need it, to make sure that everything we're doing is helping you get down the path to successfully adding custom buttons that look great on your site with your branding, color matching, right size, right shape, whatever you want.

Now, example for border and text color. I decided, hey, I want to fool around with this and play with it to see what happens. All right. So example for border and text color. Now, nobody wants this button on their site. It's a red button with green text and a blue border. How did we make that happen? Let's see. Example For border and text colors. So here is the center tag that puts it in the center, there is the link and the class of the button. Okay, now style background, color border. So, FF 0000, makes background red. This is the hex code for red color is green, with a 00. Ff 00 makes the text color green, border five pixels with solid. And that's the code for blue. Let's just to make this a funny example, border 25 pixels, I just added that, click Save update. Now the back of the admin display doesn't really show you what the button is going to look like.

So you always want to have a second tab open, where you're previewing the page, refreshing after every update, and seeing what's going on border and text color. There is a big weird looking button with a huge border that looks like some I don't know, like 9097 programming. Let's undo that example. Four, back to five pixels, solid. And that's the code to get that. And we have another note on here about adding the following thing. What does that mean? Let's see, I'm going to click on this refresh because I did an update. Now let's click this button. And it goes to a real product on my next lecture MemberVault site courses, ID 12. Now look at this action equals sign up, this link made the sidebar window open up to actually purchase the product. To show you that in detail. Let's copy the action equals sign up thing and delete that. Okay, if you 12 Here's my basic product, how to EQ your tracks, modules, sign up, whatever. Now if I was going to buy it, click Buy now. And the sidebar window opens if you want to link that makes that little window open right away. So you can go from a sales page to lead people directly into purchase. What you can do is have this extra little bit action equals sign up in the link. And don't worry about trying to remember all that. Because fortunately, in our product edit options. Let's open this you can just go right to the little gearbox direct purchase link.

That is the direct purchase link that contains the action equals sign up characters or code to make the little checkout cart open automatically, which is such a cool thing. It makes it so much fun when you're doing sending an email, you can use that link or designing a button on a page. You can use that link. So let's go back to our code editor. Let's make sure we save this. Update this too. I get back to a five. There we go. So there's that button border. This is probably I don't know if anybody's going to ever make a button looks like RGB red, green blue like that. But if you wanted to, that's how you would do it. And here's a little note about the action equal sign up thing to just make you aware error that's possible. And again, I don't expect you to type this into your browser tab ever, what you do is you go to your products list, click the gear gear icon, get the direct purchase link, and use that. So finally, Example five, a full width button. Now here we are, in our admin side at exemplify a Forward button, it's centered use the following code. Notice the style with field is doing something.

So let's go back to code source code. Example five Forward button. Again, we have the center tag, putting it in the middle, we have a link, picking the destination of where your button is gonna go. Class MV custom button, that's the core of what tells MemberVault to create a button using this link. And this, this text, there's our familiar text by now. And what do we have here, style equals, with 100%. And that's the only thing we added to make that full width button. Okay. So when we have that field, what we're gonna get is a full width button that says by now, just for fun, and I've seriously never done this before, let's go with Let's go 75%. Just to see what that's going to do. Now we refresh. Hmm, there's the Buy Now button. This is taking 75% of the page with that set. So you can see the page like in the border field, that's our page with basically of what's getting displayed. And then here's by now 75%, width of that size. How did I do that, again, I entered source code, Example five, bide my button. It's the stuff in between this center thing. Here is my button link, which is going to go there. And then there's the class custom button, which tells MemberVault to create a button that's going to be on the page style equals with 100%. And let's see if I can even remember this slash question mark. Action equals signup. Save double Save, Preview tab refresh.

This is your workflow, keep a second tab open, look at the page you're editing refresh after every update. That way, you can see what changed. And if something went wrong that you don't want, you can immediately go back to your code editor and undo the last step. So for protecting yourself from making mistakes, I know we just looked at a ton of weird looking stuff, protect yourself number one, make a backup before you start every day, every time you do this, make a fresh backup, save it to a text document, label it with the date and what page it is, and save it and close it. So you have a backup somewhere else have the text that's in your code. Then when you make an update, change a color, add a button, whatever, save it, refresh it and look at what you did immediately.

Because if I change something on this button with and 12 other things went wrong on the page, I got to know that was the edit that made everything gets screwy. And I have to go back and undo the most recent thing that I did. If you work that way, incrementally one step at a time, one change at a time making sure that what you think you're doing is actually showing up correctly, then you're never going to make a mistake, and you'll be totally safe to play with this stuff. I mean, yeah, you might get frustrated someday and be like, I can't figure out how to make it do what I want. That's gonna happen. That's part of programming world. That's when you talk to UC and get into her program to get some specific help with your MD with your branding, colors, button positioning, whatever. I'm just trying to give you some tips of what it looks like when I do it and give you some of my experience about how to do it with the workflow of having your extra tabs open. So what was I just doing full width button with the buy now.

And oh, we added the action equals signup? Did Steve get it right? Don't turn down. Hey, I did. Well, that's kind of cool. And I put this sentence use the following code to get a full width button. Member vault, converted that to a button. So for one more review, use the following code to get a full width button. That gives you the center function, the link the class creating a button that says strong like for boldface, but there's nothing in there. So that's interesting. Then style with 100%. And by now and if you want to go one interesting step farther, this little HR slash thing is giving us a dividing line above and below the button. So we have these spacers, use the following code to get a full width button there is a horizontal line divider, the button and then another horizontal line and the text note the width element. Okay.

So in here, use the following code to get the full width button. There's the horizontal line. Then loop undo. Then there is our button and then there is a another horizontal line divider above the text note the width element. Again us The following code to get a full width button, use the following code to get a full width button. Here's the button itself with some details. Here's the button itself. And then above and below the button, there are these thin gray horizontal lines, which are great dividers, that little HR thing. I use those all the time in between, you know, if let's say you have a list of bullet points in the middle of a page, and you say, here's what's included bing, bing, bing, bing bang, it's really helpful to put the horizontal dividers above and below the bullet points to focus people's attention into that section. And again, that's the little gist if you just remember HR hora, horizontal horizontal HR, and it goes in between brackets like that. And then we're done.

So that is what I wanted to share with you about making custom buttons. And I made this demo page to really be able to simply show you in a clear way, a basic button, a centered button, changing the button color, going crazy with the border and the text color. And then making a full width button. And I think just those options, right there are going to be enough to let you position buttons on your page the way you want either to the left or to the right to the center, change the colors, put the call to action on there, you know, sign up now get one free, special deal, whatever the words are by now. And that's what you will be able to do to get this kind of a look on your sales page. And here's my page basic mixing with Ableton Live. This is a real page just live on my site.

And to show you where these showed up, make your track sound pro sign up here button right up in front and center. Let's just scroll down and see what else we have four buttons. Another button sign up here with boldface on the here Steve being clever. And some of these things and I'm starting to get the feeling I might redesign some of these images when we're doing some of our image lessons in the next couple of weeks. Here we have a button over to the right side up here on the right hand side. I thought that worked more fluidly to kind of balance the whitespace with expand to see module for the button didn't quite look right in the center so I put it to the to the right side are there got some gifts testimonials? Do you did you did you did you did you use special bonus templates?

Okay, sales page stuff bonus, what's included community what's included more testimonials, button on the right. Money Back Guarantee about your instructor all things that are helpful to mention to your audience so they know who you are and what they're going to get. Here's my credentials button over to the right. FAQs with drop down menus, which we're going to talk about how to make these cool little dropdowns in another episode, sign up here button in the center, contact mockup summary everything you get doo doo doo doo doo doo doo final call to action join today, sign up here and there's the button. So that's all I wanted to show you today. In this episode. Remember that there is a knowledge base article if you want to have the basic button dynamic or how to make a basic button, there is an article on how to do it that's in the knowledgebase already. So what I'm doing is not the only place to help. We also have as resources.

This pillar posts, the CSS library blog post, that is going to tell you where you can find links to all of my episodes for the next two months for June and July. Every week, I'm doing episodes on custom buttons, drop down menus, images with rounded corners, drop shadows behind the images, all kinds of fun stuff in there, all those episodes are going to become part of this CSS library post. And you'll be able to click in to find the one you want with the title of how to make a button or whatever. But more importantly than that, there's a link to Juci's code and glitter workshop series summer of CSS magic, she is such a nice person is so helpful, amazing for tech support with you and your questions on your site, your colors, your buttons, your design, your CSS magic, whatever you want to do to make your pages look amazing, she will be able to help you do this with this summer series. That's a paid workshop that is absolutely a steal, and a deal for what you're going to learn and what you're going to get. Now I'm not saying you're going to become a master programmer, like with your own private matrix university now. But she is going to get you one step closer to being confident about editing your site. So you feel good about how it looks. And you don't have to get on tech support and type all these questions. All these people in the Facebook collab. How do I do this, I broke my site.

Don't worry about it, you're not going to break your site. I'm telling you how to avoid making serious problems by backing things up incrementally experimenting one edit at a time. And the main takeaway I want to tell you is keep a second tab open, where you're previewing your edits, to make sure that every single edit you make shows up correctly, increment by increment. And that way, you will know that you're never making a mistake and you'll see your memory vault getting better and better all the time. And I think that's it if there's anything else I'm forgot. I'll put it in the show notes. So you'll be able to copy and paste some of the code you saw today. And slap it right into your own site, change the links, change the button text and you're good to go. Thank you so much for watching. If you have any questions or comments, you can drop them under this post and I'll see you next week.

THANK YOU FOR LISTENING. HAVE A GREAT DAY!