Adding Buttons to Landing Page

[Anonymous]

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

[SanfordWhiteman]

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]

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_ · Accepted solution]

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]

Hi,

Yes, that will work perfectly !

Thanks a lot

Regards,

-Prabash Rath

[SanfordWhiteman]

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>