HTML Create Buttons
HTML Buttons Tutorial and Information

• HTML Basics

HTML Tutorial - HTML Buttons

Unlike buttons, which are created with the <input> tag (the input tag had to be embedded into the <form> element in order to work properly), the <button> element does not need any further elements or tags and can contain text and/or images. Even tables may be embedded into a button element. The text inside a button can be formatted just like any other font or text.

The basic syntax of a <button> tag or button element is very simple:

<button>This Is A Button</button>

Here is what this basic button looks like in a web browser:

This Is A Button

---

How To Change The Font Style In A Button

The default font style of a button can be changed easily with the use of the style attribute. In the button example below we are changing the font style to Italic, 8px size, and a Comic Sans font:

<button style="font: italic 8px ComicSans">This Is A Custom Font Style Button</button>

Here is what this font style button looks like in a web browser:

This Is A Custom Font Style Button

---

How To Change The Font Color In A Button

The default font color of a button is black. This color can be changed with the use of the style attribute. In the next button example we are changing the font color to red:

<button style="color: red">This Is A Custom Font Color Button</button>

Here is what this font style button looks like in a web browser:

This Is A Custom Font Color Button

---

How To Add An Image, Background Color, Text, And A Table To A Button

Images can be added to a button as well. Just embed the image source code inside the button element. Let's take it one step further now and add some background color, a table with an image and some text to a button:

<button style="background-color:yellow">
<table>
  <tr>
    <td>>img src="images/image.gif" alt="HTML button test image" /></td>
    <td>Button with Background Color, Table, Image, and Text</td>
  </tr>
</table>
</button>

Here is what this button with an image, text, and a table looks like in a web browser:

Button with Background Color, Table, Image, and Text

CSS (Cascading Style Sheet) offers a wide varity of button customization options. Go to Webmaster Seminar's CSS tutorial for more information.

---

Adding Functionality To A Button

Here is an example of using the event attribute onclick to demonstrate the functionality of the button tag:

Adding a Link to a Button:

<button onclick="window.location='htmlintroduction.php'">
Go to HTML Introduction</button>

Here is what this linked button looks like in a web browser:

Go to HTML Introduction

Closing a Browser Window with a Button

<button onclick="window.close()">
Close This Browser Window</button>

Here is what this browser window closing button looks like in a web browser:

Close This Browser Window

Opening a Link in a New Window with a Button

<button onclick="window.open('htmlattributes.php')">
Open Link in a New Window</button>

Here is what this button looks like in a web browser:

Open Link in a New Window

• More Info About HTML Attributes in Button Elements

• Back
• Next

---

HTML Related Links

• How to Get a Web Site or Online Business Started
• CMS - Content Management System
• How to Choose and Register the Right Domain Name
• Making Revenue - How to Make Money With a Website
• Server and Hosting

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:

Copy the code below and paste into your web page

<a href="http://www.webmasterseminar.com/htmlbuttons.php">
Webmaster Seminar</a><br />
HTML Buttons - Free Information, Tutorials and HTML Resources