Quick Reach
- 1 HTML button tag
- 2 A few examples of using HTML buttons
- 3 A basic example of creating a button
- 4 Example of HTML button onclick
- 5 Example of a button with double click
- 6 Multiple buttons example with next previous random
- 7 A demo of button as link
- 8 A submit button demo
- 9 HTML disabled button example
- 10 Styling buttons with CSS
- 11 Related
The tag used for creating HTML button is <button>. For example:
<button type=”button”>Submit</button>
Buttons are generally created within HTML forms. These are normally attached to JavaScript function with onclick or other events. Buttons are used to submit data to server, navigation between web pages (next, previous, random etc.) or other purpose.
You can use buttons outside of form as well. If you intend to use button outside form then use <button> tag e.g. to create navigation.
If you are using it in forms then use <input> tag to create buttons.
Button has different types, which is specified in button attribute. The button tag has following type values:
- Button (normal button with text or image)
- Submit (used to submit form data to target page)
- Reset (Resets form values to default)
HTML buttons can be presented as text or as image as well. We will show you how to use buttons in HTML forms or outside of the form. The examples below will show how to attach JavaScript functions to the button event. The examples will also show how to style CSS buttons.
Multiple buttons example with next previous random
CSS button example with different CSS properties
A button example with background image
The example below shows creating a basic button with type=”button”.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<button type=“button”>Submit</button>
</body>
</html>
|
The following example attaches a JavaScript function to onclick event of button element.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<script>
function show()
{
alert(“Button is clicked!”);
}
</script>
</head>
<body>
<button type=“button” onclick=“show()”>Submit</button>
</body>
</html>
|
The following example attaches a JavaScript function to the ondblclick event of button element.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<script>
function show()
{
alert(“Button is clicked!”);
}
</script>
</head>
<body>
<button type=“button” ondblclick=“show()”>Submit</button>
</body>
</html>
|
The following example shows using multiple buttons i.e. Next, Previous and Random. As you click on any button, the onclick event will trigger JavaScript function where you can place JavaScript functionality. For the demo, we have just used an alert.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<script>
function next()
{
alert(“Next is clicked!”);
}
function previous()
{
alert(“previous is clicked!”);
}
function random()
{
alert(“random is clicked!”);
}
</script>
</head>
<body>
<button type=“button” onclick=“next()”>Next</button>
<button type=“button” onclick=“previous()”>Previous</button>
<button type=“button” onclick=“random()”>Random</button>
</body>
</html>
|
You can also make button that is linked to a URL or act like hyperlinks. Examples below show different ways to make URLs linked to HTML button.
You can add button tag to <a> tag. Though this is not recommended officially to make <button> child of <a>, this technique works on many browsers.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”>
<button>Tutorials Collection</button>
</a>
</body>
</html>
|
Attaching a button tag to link tag example
Alternatively, you can attach <a> tag to <button> tag to make button behave as a link. See example below.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
</head>
<body>
<button type=“button”><a href=“https://www.tutorialscollection.com/”>Tutorials Collection</a></button>
</body>
</html>
|
You can apply style to button or <a> tag to make it look beautiful, explained below in CSS button section.
You can simply use location.href function attached to onclick event of button to act like a link as shown below.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
</head>
<body>
<button onclick=“location.href=’https://www.tutorialscollection.com/'”>Tutorials Collection</button>
</body>
</html>
|
The submit button is used to submit information to the server gathered in HTML forms. This information like Login page, contact page form, account creation form etc. then can be processed to save into database, sending emails etc.
The example below shows using HTML submit button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
<input type=“submit”>
</form>
</body>
</html>
|
HTML disabled button example
Disabled button may be required in specific scenarios like in navigation (Next Back Last) reaching to last page and making Last button disabled. Example below shows how to disable a button in HTML.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<script>
function next()
{
alert(“Next is clicked!”);
}
function back()
{
alert(“Back is clicked!”);
}
</script>
</head>
<body>
<button type=“button” onclick=“next()”>Next</button>
<button type=“button” onclick=“back()”>Back</button>
<button type=“button” disabled>Last</button>
</body>
</html>
|
You can also apply power of CSS to make beautiful buttons that blend or contrast to rest of the content on your web page. You can use inline CSS properties in Style attribute of button or add CSS class/id for separately created CSS.
Following examples shows both ways of using style attribute as well as applying class to the button.
The following example applies font size, color, height, width etc. and applies it by class name to buttons.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<style>
.btnclass{
font-size:12px;
color: red;
font-family: Verdana;
text-align:center;
height:50px;
width:50px;
}
</style>
</head>
<body>
<button type=“button” class=“btnclass”>Next</button>
<button type=“button” class=“btnclass”>Back</button>
<button type=“button” disabled>Last</button>
</body>
</html>
|
The following example sets background image with CSS background-image property to HTML button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<style>
.btnclass{
font-size:12px;
color: yellow;
font-family: Verdana;
text-align:center;
height:50px;
width:50px;
background-image: url(submitimg.jpg);
}
</style>
</head>
<body>
<button type=“button” class=“btnclass”>Next</button>
<button type=“button” class=“btnclass”>Back</button>
</body>
</html>
|
A button example with style attribute of button
The following example shows same properties set in style attribute of buttons.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
</head>
<body>
<button type=“button” style=“font-size:12px;color: yellow; font-family: Verdana;text-align:center;height:50px;width:50px;background-image: url(submitimg.jpg);”>Next</button>
<button type=“button” style=“font-size:12px;color: yellow; font-family: Verdana;text-align:center;height:50px;width:50px;background-image: url(submitimg.jpg);”>Back</button>
</body>
</html>
|
The following link shows more CSS buttons with CSS3 codes. You may also see creating buttons with Bootstrap framework here.
Also see The <a> tag | HTML form
Leave A Comment?