Button Size HTML

HTML Button Size can be changed according to programmer use. HTML button submits HTML page.

HTML Button Size can be changed according to programmer use. HTML button submits HTML page.

In the following example we will learn how to change the size of a HTML button. First we create a HTML page. Then we display a HTML Button with specific width, height and colour. This width, height and even colour can be changed as per user?s wish.

<button> tag indicates a push button and the width, height and colour attributes are defined inside the tag.

Note: One can add an image in the background, change the font of the text, color of the text as well.

<title>Button Size</title>
<button type="Button" style="background-color: lightgreen; height: 25px; width: 100px">Small Button</button>
<button type="Button" style=" background-color:#00CCFF; height: 50px; width: 100px">Big Button</button>

Output: The following output shows two button with different size and colour.

HTML Button is very useful in taking the user action. On the button click you can perform and action such as submit the form, call JavaScript function etc.

In this example we have explained you how to add the style sheet properties to a button object. With the help of style sheet you can make good looking buttons. Read more html tutorials.

Related HTML tutorials:

HTML Layout
A Web Page Layout is likey to be the layout of the pages in a newspaper. HTML columns are used to present the contents of a web page. HTML columns are created by using tables to design the layout

Set Background Colors and Images in HTML
The background colors can be set to the web pages by using the body attribute bgcolor and putting any color value into it in HTML Page.

Cascading Style Sheet(CSS)
Cascading Style Sheet (CSS) is known as style sheet language, define the presentation of a document written in a markup language.

Share on Google+Share on Google+

Button Size HTML

Posted on: May 9, 2013 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: Button Size HTML  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image