Create a simple button in HTML
Posted on Jan. 26, 2021, 8 p.m. by Bishal ( 7179)
In this blog of Code With Bishal, I am going to show you how can you create a simple Button in HTML. So, stay with me till the end and you will get all the downloadable resources.
So What is a button in HTML?
-> In HTML, <button> is an element used to create a clickable button. The button created in this tutorial gives visitors an attractive simple button made with HTML and CSS.
How it is different from <input type="button"> ?
-> Inside a <button> </button> element We can Put texts, embed elements like the <p> </p> tags,<b> </b> tags, <strong> </strong> tags, <br> and <img src=""> tags. We can't embed these tags inside <input type="button">
What are the good practices to keep in mind while creating a button?
-> In HTML, the <button> </button> has a type="" attribute which is submit by default i.e. <button type="submit"> Submit </button> . So it is always a good practice to define the type of the button. Here are some examples:
<button type="submit"> Submit Button </button><button type="button"> Button </button><button type="reset"> Button </button>
| Browser Support | Chrome | Internet Explorer | Opera Mini | Firefox | Safari |
<button>
| Yes | Yes | Yes | Yes | Yes |
|---|
HTML button Attributes:
| Attribute |
autofocus
|
| Usage |
<button autofocus> Autofocus </button>
|
| Demo |
|
Demo Button :
Step by step guide for creating a simple button in HTML:
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Simple Button - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>-
Create a file
style.css -
Link External CSS with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link rel="stylesheet" href="style.css">Now add some style to your button:
Add these code to the style.css file
.button {
border-radius: 4px;
background-color: #00FFFF; /* change this to change the colour of button */
border: none;
color: #3333ff; /* change this to change text colour */
text-align: center;
font-size: 38px; /* change this to change the font size */
padding: 20px;
width: 600px; /* change this to change the width of the button */
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
Source Code
1) HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Button - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<button type="button" class="button">Change this to change text</button>
</body>
</html>
2) CSS Code:
.button {
border-radius: 4px;
background-color: #00FFFF; /* change this to change the colour of button */
border: none;
color: #3333ff; /* change this to change text colour */
text-align: center;
font-size: 38px; /* change this to change the font size */
padding: 20px;
width: 600px; /* change this to change the width of the button */
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}