Free Buttons for Websites

In addition to our free button collection, we also provide:
Free Online Button Maker  Click Here (Requires registration - Upgrade $1)
Six Button Sets with Text Click Here
Free Bullet Gallery
Free Web Graphics for headings and logos
Creating Buttons with CSS
NEW: 2 Button sets for hover color change.

Your site navigational system can be enhanced by the use of colored buttons. We provide various colors and styles for your convenience.
The code for adding text to the buttons is provided below.

Please - Do not link to the images on these pages. Copy them and upload them to your own servers.








Images were created using Standard Web Palette colors, on a neutral background. They are transparent, but a slight fringe may exist on some backgrounds.

Blue: 0033cc, Red: ff0000, Green: 009900, Old gold: ffcc00,Violet: 990099, gray: cccccc

To copy a button, right click on the button and choose Save Picture As.

Place this code in the head section of your document.

<style type="text/css">
#button a {font-family: Arial;font-style : normal ;font-size : 10pt; font-weight :bold;text-align :center; color :#FFFFFF;text-decoration : none }
#button a:hover{ font-family: Arial;font-style : normal ;font-size : 10pt; font-weight :bold;text-align :center; color :#000000;text-decoration : none}
</style>

HTML - Body Section.

<div ID="button">
<table width="150" height="23" cellpadding="0" cellspacing="0" background="buttons/button-red-blank.gif">
<tr align="center" valign="middle">
<td align="center">
<a href="URL">Home</a></td></tr></table>
</div>

Dimensions should be same as button size.
Click Home for multiple examples and codes.

Home

More Free Buttons

Please - Do not link to the images on these pages. Copy them and upload them to your own servers.


RectanglesArchesHalf Round













MetalParallelBorder













Novelty Buttons

Use background method shown above to place text. Place on white background only.


4 Buttons Vertical

HTML - 4 Vertical ButtonsCSS - 4 Vertical Buttons

Place entire block of code in vertical navigation cell of table within your body section. Save the image in the same folder as your page.


<table width="175" cellpadding="5" cellspacing="0" border="0">
<tr align="center" valign="top">
<!--Change background color of cell to match your choice of button color.-->
<td bgcolor="#0033cc" align="center" colspan="1" rowspan="1">
<div ID="button">
<!--Change button background name to your choice of color and style-->
<table width="150" height="23" cellpadding="0" cellspacing="0" background="button-blue-blank.gif">
<tr align="center" valign="middle">
<!--Change #begin to your link destination-->
<td align="center"><a href="#begin">Home</a></td></tr></table>
<table width="150" height="23" cellpadding="0" cellspacing="0" background="button-blue-blank.gif">
<tr align="center" valign="middle">
<td align="center"><a href="#begin">Products</a></td></tr></table>
<table width="150" height="23" cellpadding="0" cellspacing="0" background="button-blue-blank.gif">
<tr align="center" valign="middle">
<td align="center"><a href="#begin">Information</a></td></tr></table>
<table width="150" height="23" cellpadding="0" cellspacing="0" background="button-blue-blank.gif">
<tr align="center" valign="middle">
<td align="center"><a href="#begin">Contact</a></td></tr></table>
</div>
</td></tr></table>

Place this code in head section.


<style type="text/css">
#button a{ font-family: Arial;font-style : normal ;font-size : 10pt; font-weight :bold;text-align :center; color :#FFFFFF;text-decoration : none}
#button a:hover{ font-family: Arial;font-style : normal ;font-size : 10pt; font-weight :bold;text-align :center; color :#000000;text-decoration : none}
</style>


3 Buttons Horizontal



HTML - 3 Horizontal ButtonsCSS - 3 Horizontal Buttons

Place entire block of code in horizontall navigation cell of table within your body section. Save the image in the same folder as your page.


<div ID="button">
<table width="450" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td align="center">
<!--Change button background name to your choice of color and style-->
<table width="150" height="23" cellpadding="0" cellspacing="0" background="button-green-blank.gif">
<tr align="center" valign="middle">
<!--Change #begin to your link destination-->
<td align="center"><a href="#begin">Home</a></td></tr></table>
</td>
<td align="center">
<table width="150" height="23" cellpadding="0" cellspacing="0" background="button-green-blank.gif">
<tr align="center" valign="middle">
<td align="center"><a href="#begin">About Us</a></td></tr></table>
</td>
<td align="center">
<table width="150" height="23" cellpadding="0" cellspacing="0" background="button-green-blank.gif">
<tr align="center" valign="middle">
<td align="center"><a href="#begin">Contact</a></td></tr></table>
</td></tr></table>
</div>

Place this code in head section.


<style type="text/css">
#button a{ font-family: Arial;font-style : normal ;font-size : 10pt; font-weight :bold;text-align :center; color :#FFFFFF;text-decoration : none}
#button a:hover{ font-family: Arial;font-style : normal ;font-size : 10pt; font-weight :bold;text-align :center; color :#000000;text-decoration : none}
</style>


More Instructions

To change the color of the caption on your images change the color assignment in the style setting of the head section.

  • white color : #FFFFFF
  • black color : #000000
  • red color : #FF0000
  • blue color : #0000FF

To isolate the settings for the links on your buttons, so that all hyperlinks on a page are not affected:

  1. Place the buttons within a division tag and give it an id. <div ID="buttons">Button Code</div>
  2. Change the style selector in the head section to: #buttons a { your declarations here}