How to Create a Custom Button on Your Product Page Using CSS

If you’re looking for a way to add your own custom button to your Teaser page so people can go straight to the checkout form, well now you can!

Before we dive into the guide, a little disclaimer: It’s important to note that using CSS in your MV site is fully at your own risk. Only do so if you’re comfortable with codes. We’re unable to provide support for any CSS related issue at this time.

With that being said, let’s get right into the how!

First things first, you must add the coding in code editor mode:

Simply click on the bracket icon and voila! You can now add the code found below.

A BASIC BUTTON

Here’s the basic code:

NOTE: Don’t forget to add in the actual link so your button will show up perfectly and direct people to the right place.

Andddd that’s it! Now you have your very own custom button. 👍

But here’s the beauty of CSS: you can take it up a notch and add advanced coding so it looks really fancy!

CENTERING

If you'd like your buttons to sit nicely in the middle, you just wrap them in center tags like this:

Or simply highlight the button and click the centering button in your editor's toolbar:

ADD/CHANGE BACKGROUND COLOR

Copy the code below to customize the color of your button:

Let's unpack what this code means:

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.

Feel free to play around and change the values to get the exact look that you're looking for.

GOING FULL-WIDTH

MV's buttons aren't born full-width, so if you like that look, then you need to apply some code to them.

Here's the code:

OPEN IN A NEW TAB

To ensure your button opens in a new tab, include "target="_blank" in your code.

Here's the code:

Click here to check out a quick video tutorial and examples of the custom button.

There you have it!

Now you can go and add your very own custom button on your Teaser page. Enjoy!!

Thank you, Juci Kisistók for generously providing us with the directions on how to add a custom button. Here's the original post inside the Collab FB group.

Juci is one of our Certified Partners and a CSS whiz and you can work directly with her for all your MV customization needs. 🙌

Take a peek at her gorgeous MV site right here!

Questions? Reach out to us at hello@membervault.co, via chat support within your Admin account (available to paid users), or connect with other users within our FB Group, The MV Collaborative.