SOLVED

Adding Buttons to Landing Page

Go to solution
Anonymous
Not applicable

Adding Buttons to Landing Page

Hi All,

A very Happy New Year !

So I am designing a landing page, which has three different images stating three different products of our company. I wanted to add three separate buttons onto each image, clicking upon which the users will be redirected to different specific webpages containing the respective product pricing.

Example :

Image 1 : Hire Drivers in Bangalore :: (Button redirect link - http://babajob.com/hire-drivers-in-bangalore)

Image 2 : Hire Cooks in Mumbai :: (Button redirect link - http://babajob.com/hire-cooks-in-mumbai)

Image 3 : Hire Stewards in Delhi :: (Button redirect link - http://babajob.com/hire-stewards-in-delhi)

How do you guys suggest I go about , in order to add these separate buttons on to my landing page so that their click action, redirects user to different webpages ?

Thanks !

Regards,

-Prabash Rath

1 ACCEPTED SOLUTION

Accepted Solutions
Dan_Stevens_
Level 10 - Champion Alumni

Re: Adding Buttons to Landing Page

Unless I'm missing the desired objective here, the simplest approach would be to design three separate button images, place them on the page (using a rich-text object) and apply the appropriate URL to each of them.  Using forms for this would be overkill (unless you want to capture some hidden data for known users).

View solution in original post

5 REPLIES 5
SanfordWhiteman
Level 10 - Community Moderator

Re: Adding Buttons to Landing Page

There are easily 10 different ways you could design something that fits that description ("click button to open webpage").

I am partial to a semantic button like

   <BUTTON type="button" data-href="http://babajob.com/...">

Then add a click listener to set document.location.href to the data-href custom attribute.

Anonymous
Not applicable

Re: Adding Buttons to Landing Page

Hi Sanford,

Could I also use forms with just buttons ?

As in, I create three different forms which just have buttons. I then use these forms below those images, and Select External URL in Follow-Up Page. Thereafter, I simply enter my desired URL ; so that whenever that button is clicked, the user is redirected to the desired webpage.

Do you think, this is one of the correct ways to do it ?

Thanks a lot !

-Prabash.

Dan_Stevens_
Level 10 - Champion Alumni

Re: Adding Buttons to Landing Page

Unless I'm missing the desired objective here, the simplest approach would be to design three separate button images, place them on the page (using a rich-text object) and apply the appropriate URL to each of them.  Using forms for this would be overkill (unless you want to capture some hidden data for known users).

Anonymous
Not applicable

Re: Adding Buttons to Landing Page

Hi,

Yes, that will work perfectly !

Thanks a lot

Regards,

-Prabash Rath

SanfordWhiteman
Level 10 - Community Moderator

Re: Adding Buttons to Landing Page

Of course Dan's right that <A><IMG></A> will work fine for navigation!  When someone literally says "button" I'm partial to the experience of traditional interface buttons if possible.  Check some subtle differences between <BUTTON> and <A> here: JSFiddle. For example, the button-up/button-down effect and the unselectable text are built-in w/<BUTTON> but would have to be simulated with <A>