Create a simple button in HTML


Posted on Jan. 26, 2021, 8 p.m. by Bishal     (  5252)


Card Thumbnail
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?

 

DigitalOcean Referral Badge

 

-> 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"> 

 

DigitalOcean Referral Badge

 

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

 

 

 

DigitalOcean Referral Badge

 



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

 

DigitalOcean Referral Badge

 

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;
}

 

DigitalOcean Referral Badge

 

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>

 

DigitalOcean Referral Badge

 

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;
}

 

DigitalOcean Referral Badge

 





Leave a Comment:
No comments Found. Be the First one to comment