1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blbuynow.htm

was emailed to:

Thanks for sharing About.com with others!

Buy Now

Buy Now Hover Link

When you are trying to sell something from your web site, it is much easier to make the sale if you have a "buy now" button right there on the screen in front of the buyer at the time that they decide to buy. Well with this script you can.

The button draws attention to itself by appearing a few seconds after the page loads and then moving slowly down the left side of the page until it is reaches the half way down the page. It will then stay right there with the page scrolling behind it as your visitor reads their way down the page. If they decide to buy whatever it is you are selling then the buy button is right there for them to click on to immediately make their purchase.

By installing the following script into your page you can have a "Buy Now" button appear on your page exactly the same as the one on this page except that your button will have some additional JavaScript attached to the button itself to actually process the purchase (which mine doesn't since I am not actually trying to sell anything here).

The first step in adding a "buy now" button to your page is to copy the following script and save it as buynow,js.

The next thing you need to do is to copy the following stylesheet command and save it as buynow.css.

#buynow {background-color:#fff; border:3px outset #ccc; text-align:center; font-size:200%; z-Index:999; visibility:hidden; position:absolute; top:-200px; left:-200px; width:150px;}

You next add those two files into your page by adding the following just before the </head> tag in your page.

<script type="text/javascript" src="buynow.js">
</script>
<link rel="stylesheet" href="buynow.css" type="text/css">

The final step is to add the actual code for the button into your HTML in the body of the page.

My example "buy now" button code reads as follows:

<div id="buynow">Buy Now</div>

There are two ways that you can convert this code to allow people to make their purchase by clicking on it. Once way would be to enclose the text inside an <a> element where the href on that tag identifies the page to link to in order to process the purchase. That's the easiest way if you want the button to link directly to a web page. If instead you need to process some JavaScript to handle the purchase then attaching that script into an onclick added to the div tag will provide the necessary link to your purchase processing JavaScript.

See More About

©2014 About.com. All rights reserved.