Making a 'Next' Button

A "next" button at the end of an article or a section can be a convenient way to lead the site visitor to the next page in a sequence.

Here is how to make a button to cause the browser to load the next page:

<form 
   method="get" 
   action="https://www.willmaster.com/">
<input 
   type="submit" 
   value="NEXT">
</form>

Edit the following:

1. Replace the https://www.willmaster.com/ URL with the URL of the next page.

2. Replace NEXT with the text you want on the button.

"Next" Button Designs

The above is a plain form button. CSS can be used to style the button. Or, an image can be used instead of a button.

CSS for the "Next" Button

CSS can be used to style the button. This example makes a button with a yellow background, red text, and a red double border:

<form 
   method="get" 
   action="https://www.willmaster.com/">
<input 
   style="background-color:yellow; color:red; border:3px double red;" 
   type="submit" 
   value="NEXT">
</form>

Edit the following:

1. Replace the https://www.willmaster.com/ URL with the URL of the next page.

2. Replace the style with your preferred button style.

3. Replace NEXT with the text you want on the button.

"Next" Button Image

An image can be used instead of a button. Example:

<form 
   method="get" 
   action="https://www.willmaster.com/">
<input 
   type="image" 
   src="/images/myimage.gif" 
   width="90" 
   height="35" 
   border="0">
</form>

Edit the following:

1. Replace the https://www.willmaster.com/ URL with the URL of the next page.

2. Replace the /images/myimage.gif image location with the location of your image. Similarly, edit the width, height, and your preference of border size.

Will Bontrager