Add more buttons to landing page template

I am using the 'Reveal' cover page for my website. It supports to Call-to-action button. I want to add one more so that there are a total of 3 buttons.

I know I can add more than 2 option by adding them as links but that is not what I want.

Can I insert the third button using JS?

I couldn't figure out how to add more buttons to the Reveal Coverpage, but if you need more than two links to different pages use this code and modify the details to what you need.

Go to Actions > choose Navigation > add your three or five links you need > then go to Configure the Cover Page (the gear) > choose advanced > add this code:

<style>
    li{
           border-radius: 15px;
           background: white;
           padding: 15px; 
           width: 250px;
           height: 25px;
       }
       a{    
           position: relative;
           left: auto;
           bottom:50%;
         }
</style>

This will make your links look like buttons. This mangles the list and a tags for the page and makes them look like rounded corner buttons with centered text. You might nee to tweak it for your needed words.

Hope this helps.

Sandboxorphan, thanks for the code! This helped me get started. I'm not familiar with code, so I am wondering how one would change this code so that the buttons are only outlined in white instead of being solid. Also the buttons lineup in the center of the page. What would I need to change to make them run horizontally like they normally do before the code modified them?

Thanks again. Noah

Hi - Thank you for the post! I am wondering if you could help with a text centering issue. I am trying to get the text to center inside of the 'button boxes' (photo attached) but can't seem to get it to work. Can you help?

The Current Code:

 <style>
     li{
            border-radius: 10px;
            border-style: solid; 
            border-color: #ffffff;
            background: transparent;
            padding: 10px; 
            width: 100px;
            height: 10px;
        }
        a{    
            position: center;
            left: auto;
            bottom:50%;
          }
</style>

@NewStandardES have you figured the centering issue?

@NewStandardES have you figured the centering issue?

To help with code specific to your site and limited to affecting only the links you want to affect, one needs the site url. Consider editing your question (click on the small cogwheel icon to the right of the question title) to give this.

@ChristianJ40 I found that I was having a similar problem and I found an easy fix was adjusting the font size along with the box size. This didnt allow me to accurately shift the words by pixel increments within the boxes but it satisfied what I was trying to achieve. Also has been working across platform

@ChristianJ40 I found that I was having a similar problem and I found an easy fix was adjusting the font size along with the box size. This didnt allow me to accurately shift the words by pixel increments within the boxes but it satisfied what I was trying to achieve. Also has been working across platform

I did it with this code:

'