Free Buttons for Websites

Browse Our Selection

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.

Create a FREE Website

NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!
19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Start Your FREE Website Now!

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.

Single Button Code

HTML Code - Body Section.

<div id="newbutton"> <p><a href="#multiple">Home</a></p> </div>

Click Home for multiple examples and codes.

Home

CSS

#newbutton a  {
background-image:URL(red-button.gif);
background-repeat:no-repeat;
width:150px;
height:23px;
display:block}

#newbutton a {
font-style : normal ;
font-size : 8pt;
font-weight :600;
text-align: center;
text-decoration : none;
color :#ffffff;
padding-top:3px;
margin:0 0 0 0}

#newbutton a:hover {
color :#515164;
}

More Free Buttons

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

Rectangles	Arches	Half Round

Metal	Parallel	Border

Novelty Buttons

4 Buttons Vertical

Home Products Information Contact

HTML - 4 Vertical Buttons

Place code in your body section. Save the image in the same folder as your page.

<div id="vertical"> <p><a href="#begin">Home</a> <a href="#begin">Products</a> <a href="#begin">Information</a> <a href="#begin">Contact</a></p> </div>

CSS - 4 Vertical Buttons

Place this code in style sheet.

#vertical p {
  width: 160px;
  background-color:#0033cc;
  text-align: center;
  padding: 4px 0 4px 0
}

#vertical a  {
background-image : URL(blue-button.gif);
 background-repeat : no-repeat;
width:150px;
height:23px;
display:block}

#vertical a {
font-style : normal ;
font-size : 8pt;
font-weight :700;
text-align: center;
text-decoration : none;
color :#ffffff;
padding-top:3px;
margin:0 0 0 0}

#vertical a:hover {
color :#000000;
}

3 Buttons Horizontal

Home

Products

Information

HTML - 3 Horizontal Buttons

Place HTML code in body section. Save the image in the same folder as your page.

<div id="horizontal"> <p><a href="#begin">Home</a></p> <p><a href="#begin">Prods</a></p> <p><a href="#begin">Info</a></p> </div>

CSS - 3 Horizontal Buttons

Place this code in style sheet.

#horizontal p {
  width: 150px;
  background-color:#009900;
   padding: 4px 0 0 0;
   margin: 0 0 0 0;
   float: left
}

#horizontal a  {
background-image : URL(green-button.gif);
 background-repeat : no-repeat;
width:150px;
height:23px;
display: block}

#horizontal a {
font-style : normal ;
font-size : 8pt;
font-weight :700;
text-align: center;
text-decoration : none;
color :#ffffff;
padding-top:3px;
margin:0 0 0 0}

#horizontal a:hover {
color :#000000;
}