Jump to content

Add more buttons to landing page template

Recommended Posts

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?

Link to comment
  • 1 month later...
  • Replies 9
  • Views 13.6k
  • Created
  • Last Reply

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.

I design stuff

Link to comment
  • 2 months later...

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

Link to comment
  • 6 months later...

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>




screen-shot-2016-02-15-at-104035-am.png.88b091dcb788513c5c69d15ec4e62f90.png

Link to comment
  • 4 months later...

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.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 1 month later...

@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

Link to comment

@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

Link to comment
  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.