Intro to HTML: Buttons

Quick Copy Boxes

Buttons are used to execute code. The code may be written in PHP, Javascript, or another programming language.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Submit Button

For a common HTML/PHP form, submit input fields are used to submit the user input contained on the form. On mouse click, any code tied to the form will be executed.

This is a submit button:

Example: Input Type Submit


<input type='submit' value='Submit' > 
            

<input Input Element
type='submit' This is what makes the input element a submit button.
value='Submit' The value is the text displayed on the button.


Button Tags

Button tags are also used to make buttons. The input button is better to use for submiting information on a HTML/PHP form. However, there may be buttons that do not submit form information. For example, a button may be used to play a song or copy text. However, button tags can also be used create submit buttons. When we get to Javascript, we will be using more button tags.

This is a submit button:

Example: Basic Button


<button type='button'>Click Here<button> 
            

<button - Start button
type='button'> - type is button
Click Here - Text on Button
<button> - End Button

Navagation Links

You can turn almost anything into a button that redirects to another page. This is done by placing the element you want to redirect inside <a>tags

Example navigation Link:

If you click on the image above, you will be redirected to Coding Commanders Home Page.


Example: Image as Navigation Button


<a href = 'http://www.codingcommanders.com/'>
 <img width = '75px;' src = '../logo.png'>
</a>

<a href = 'http://www.codingcommanders.com/'> - Start Link Tag
 <img width = '75px;' src = '../logo.png'> - Image Element
</a> - End Link Tag

We may want to use CSS to create a different effect when the user hoovers over the image with the mouse. We can do this with CSS.


Example: Hover Background-Color


a:hover {
background-color: black;
}

a:hover { - this will format what happens when the user hovers over <a> elements
background-color: black; - The background color will be black
} - Ending CSS bracket

Applied Assignment

Next, play around with the code below. Make sure you check the CSS tab to play around with button CSS formatting.