programminghead Logo

HTML Button Example :

In "HTML Buttons Example" tutorial we are going to Create some button inside HTML document using HTML (Hyper text markup language) and CSS (cascading style sheets) for styling HTML buttons inside HTML web-page/HTML Document.
But before that we have to know little About HTML Buttons.

HTML button example Picture

HTML Buttons :

HTML Buttons defines Click-able buttons inside HTML document which can be used as a Submit button in HTML Form to submit HTML Form's data (submit Button).
Button for clearing HTML forms field (Clear Button),
Button to Run javaScript Function, Buttons for redirecting uses to another page and ETC.

HTML button example 1 : HTML Button Syntax :


    <button> button name </button>

Results :

HTML button example 2 : HTML Input Button Syntax :


    <input type="submit"/>

Results :

HTML button example 3 : Radio Button Syntax :


    <input type="radio"/>

Results :

HTML button example 4 : Changing HTML Submit Button Text :


  <html>
    <body>

      <input type="submit" value="myBtn"/>

    </body>
  </html>

Results :

Changing HTML Submit Submit Button Text Example Explained :

HTML and Body tags

These HTML and Body tags are part of HTML Syntax. HTML document starts with HTML tag the Tag's starting and Closing point depends upon it's starting (<html>) and closing (</html>) tags.
To know more about HTML syntax check out our first HTML Tutorial : Click here : HTML tutorial one

HTML input tag <input/>

HTML Input tag specifies input fields inside HTML document/Web-page. Input fields like Button, Textbox, Checkbox ETC.

input tag's Type attribute : type="submit"

Input tag's type attribute specifies Input field's type inside HTML Document. type="submit" for Submit button, type="text" for input Text Box, type="radio" for radio buttons and ETC.

Input tag's value attribute : value="myBtn"

Input tag's value attribute specify text values inside input field. so what ever you write inside Input tag's value attribute, that text will be written inside input field.

HTML button example 5 : HTML Button links :


  <html>
    <body>

     <a href="test.html">
       <button>click here</button>
     </a>

    </body>
  </html>

Results :

HTML Button links Example Explained :

HTML anchor/a tag : <a> </a>

A tag or anchor tag tag used inside HTML documents to assign links to HTML's elements like HTML Buttons. To add a link to HTML element we have to declare that HTML element (button) inside a tag's starting <a> and closing </a> tags.

A tag's href attribute : href="location"

A tag's href attribute assigns path for a/anchor tag. We can assign local links like : <a href="index.html"> or external links like : <a href="http://programminghead.com"> to HTML Elements using a tag's href attribute.

HTML button example 6 : HTML Button For submitting Form Data :


  <html>
    <body>

     <form action="form-data.php" method="POST">
       <input type="text" name="name" placeholder="your name">
      <input type="submit">	
     </form>

    </body>
  </html>

Results :

HTML Button For submitting Form Data Example Explained :

This way of summiting HTML form's data is little tricky because we are using PHP to get the form data and to display entered data on the screen.
to make this Example work you also have to create a PHP file with .php extension and you also have to install local servers like Wamp/Lamp/Xamp to run PHP file inside your Local Computer.

PHP file's Code :

<?php
$name=$_POST['name'];
echo "your name is ".$name;
?>

HTML Form tag : <form>

HTML Form tag used inside HTML to declare form elements like Input Boxes, Submit Button, radio buttons ETC.

Form tag's action attribute : action="path"

Form tag's Action attribute assign external file's path where form's Data going to be Posted. In this case we are sending this form's Data to external PHP file.

Form tag's method Attribute : method="POST"

Form tag's method Attribute defines HTTP method for sending our Form's data to url. In this case we are using POST method bute there is also a another method Called GET which wildly used by Search Engines.

HTML button example 7 : Toggle HTML Radio Button :


  <html>
    <body>

    <p>Select Gender Radio Button :</p>
      male<input type="radio" name="gender"/><br/>
      female<input type="radio" name="gender"/>

    </body>
  </html>

Results :

Select Gender Radio Button :

male
female

Toggle HTML Radio Button Example Explained :

Para tag : <p>

P tag or para Tag used inside HTML document to assign/write ParaGraphs.

type attributes radio property:

Type attributes radio value assign input radio button inside HTML document.

Input tag's Name attribute : name="inputName"

Input tag's Name attribute assigns identity for input field. But we using same name in the Multiple input field (radio buttons fields) add the toggle effect to Input radio Buttons. So browser will load all radio buttons, because of the same NAME value browser will allow users to select one radio button at a time.
But if you want to select multiple radio buttons then uses unique name or don't use names inside input field or use Type="textbox" text boxes for that.

HTML button example 8: Running JavaScript Function Through HTML Button :


  <html>
    <body>
     <button onClick="myFunction();">Run JavaScript</button>
      <script>
        function myFunction(){
           alert("Thanks for Running This Function");
        }
      </script>
    </body>
  </html>

Results :

Running JavaScript Function Through HTML Button Example Explained :

onCLick attribute : onClick="function();"

inCLick attribute add on Click event to HTML Elements like HTML Buttons so when user clicks the Button particular Task or Function can execute/invokes.

Script Tag : <script>

Script tag used for inserting JavaSCript inside HTML Document. Inside the Script's Starting and closing tags we have to write who JavaScript program.

JavaScript Functions : function name(){}

JavaScript Functions used to declared a function inside JavaScript and followed by the function name "myFunction", two round brackets "()" and two curly Braces "{}". Inside the function's braces "{}" we have to write our function's data.

JavaScript alert method : alert("show this")

JavaScript Alert method create a POP-Up alert box at the top of the Browser Screen with some text and OK or Cancel button.

HTML button example 9: Show or Hide HTML Elements using HTML Buttons :


  <html>
    <body>
      <p id="my-Text">This is a TEXT</p>
       <button onClick="showText();">Show Text</button>
       <button onClick="hideText();">Hide Text</button>
        <script>
         function showText(){
           document.getElementById("my-Text").style.display="block";
         }
         function hideText(){
           document.getElementById("my-Text").style.display="none";
         }
        </script>
    </body>
  </html>

Results :

This is a TEXT

Show or Hide HTML Elements using HTML Buttons Example Explained :

To hide or show HTML Element we are using JavaScript DOM elements so we can use CSS effects with click events.

document.getElementById("my-Text") :

This is a JavaScript DOM selector for selecting and targeting HTML Elements inside JavaScript. Here we are using button's ID but we also can target tags (by document.getElementsByTageName) in javaScript.

.style.display="block";

JavaSCript DOM style attribute who STYLE the selected HTML element and set Element's DISPLAY value to BLOCK from none.

.style.display="none";

JavaSCript DOM style attribute who STYLE the selected HTML element and set Element's DISPLAY value to NONE from block.

HTML button example 10: Image inside Button :


  <html>
    <body>
    <button>
      <img src="logo.jpg"/>
    </button>
    </body>
  </html>

Results :

HTML Image Tag : <img/>

IMage tag use to insert Images inside HTML Document.

Images src attribute : src="path"

Images src attributes used for assigning source Image file inside Image img tag.

HTML button example 11: HTML Button Style :


<html>
 <head>
  <style type="text/css">
   button{
    height:30px;
    width:70px;
    border:0px;
    background-color:lightgray;
   }
   #btn1{   	
    border-radius:5px;
	}
   #btn2{   	
    border-radius:5px 0px 5px 0px;
	}
   #btn3{   	
   	height:30px;
   	width:30p;
    border-radius:15px;
	}
   #btn4{   	
   	height:30px;
   	width:30p;
   	border:2px solid red;
    border-radius:15px;
	}
   #btn5:hover{
    border:2px solid blue;
    border-radius: 15px 0px;
    color:blue;
    }
  </style>
 </head>
 <body>
   <button id="btn1">B1</button>
   <button id="btn2">B2</button>
   <button id="btn3">B3</button>
   <button id="btn4">B4</button>
   <button id="btn5">hover</button>
 <body>
</html>

Results :

STYLE :

style tag : <style>

Style tag used in HTML between HTML's head tags to include Style inside HTML Document.

selecting Buttons : button{....}

To style HTML Buttons we have to select them first. Here we have button selected buy Tag name.
To select HTML Element with tag name we just have to write tag name inside style tags followed by "{}" curly braces and inside these '{}' curly braces we have to write all style property for selected HTML element (Button).

Selecting Elements by ID name : #btn1, #btn2, #btn3, #btn4

To select HTML Elements by it's id name we have to use '#' hash sign before ID name in CSS.

CSS Size Property : height:30px;,width:70px;

IN CSS we Have Height and With property to change HTML element's SIZE. We have to give values in pixels (30px) or percentage (10%) or according to View port view-port Height(10vh) or view-port width (10vw).

CSS Background Color Attribute : background-color:gray;

CSS Background Color Attribute Allow you to change HTML element's Background Color manually.

CSS Border Property : Border : 0px, border 2px solid red, border-radius:15px;border-radius:15px 0px;

CSS Border Property allow you to make change to HTML ELement's border thickness, border color, border radius ETC.

border:0px;

This CSS Property (border:0px;) will set selected HTML Element's border's thickness to 0px.

border:2px solid red;

This CSS property will set Selected Element border's thickness to 2px border:2px and also set border's default color to solid red border:2px solid red;

border-radius:15px;

This CSS property will add 15px round shape around the selected Element's Border from every corner.

border-radius:15px opx;

This CSS property will make top left and bottom right corners 15px round and top right and bottom left corners 0px round of selected element.
Because this property means : border-radius : 15px top and bottom 0px right and left.
Border radius starts rounding border from the corners thats why 15px round radius applied to top left and bottom right corners and 0px radius to top right and bottom left corners

CSS Hover Effect : #btn5:hover{}

CSS Hover effect add all declared CSS property to selected HTML Element on Mouse Hover/When you move mouse over selected element (btn5).

CSS Color Property: color:blue;

CSS Color property add color to selected Element's Text. If these isn't any text then this Color property will not work.

Comments

Write to Us

Captcha