Buttons in HTML - Khabork

Button is the one of the impotent element in the HTML.We can do many several work by clicking the button.Button is basically a input type element in the HTML. By the button Tag we can submit our Sign Up or Login form or any kind of form Submition we use the button tag.We also do any kid of work like when we post our photos , videos or other documents then we use the button for the final submission.

Button without CSS :

<button>Click Me</button>

out put: 









Without CSS the button looks a normal ,It not looking good, it have no background color, no text color, no border. So we have to customize the button in our own way, So we have to add CSS to the button property.so we are adding some CSS property to the button for more attractive.

Button With CSS   :

html:

  <button>Click Me</button>

CSS:

button
{
width: 150px;
height: 50px;
color:  white;
border-radius: 5px;
font-size: x-large;
font-family:  Arial Black;
background-color:  rgb(1, 82, 78);
box-shadow: 2 px 2px 4px black;
border: none;

}
Out Put:

By using the CSS property the button looks so attractive. This button you can use any html file.

The other types of html buttons  

1) This button has no background color but it has the green solid border and its text color is green. Its looks so cool. you can use the button any kind of html page.

Html:
<button>Click Me</button>

CSS:

button
    {
width: 150px;
height:  50px;
color: green;
border-radius: 5px;
font-size: x-large;
font-family:  Arial Black;
border: 4px solid green;
box-shadow:  2px 2px 4px black;

    }

Out Put:

2)This Button is curve button, the corners are curved by the border radius.the background of the button is green and the color is white
.It has 2px solid white border. 

html:

<button>Click Me</button>

CSS:
button
    {
font-size: x-large;
font-family:  Arial Black;
border:  2px solid white;
box-shadow: 2px 2px 4px black;
color: white;
        background: green;
        width: 15%;
       padding: 1%;
       border-radius: 20%; 

  }
Out Put:

3) This is the circle button. This type of button use in the any kind of calculation like as calculator or the shopping center listing items.
The background of the button is the orange and color is white.

html:
<button> + </button>

Css :

button
{
margin-left: 500px;
margin-top: 300px;
font-size: 60px;
font-family: Arial Black;
border: none;
box-shadow: 2px 2px 4px black;
color: white;
        background: orange;
        width: 100px;
        height: 100px;
        border-radius: 50%; 

}
Out Put:

4) This button is the nice looking cool.The button is two side is curve like the capsule tablets.This buttons background color is pink and the text color is white and the 1px white solid borser radius.Its look awesome.
html :
<button>Click Me</button>

CSS: 

button
     {
font-size: 30px;
font-family:  Arial Black;
border: none;
box-shadow:  2px 2px 4px black;
color: white;
        background: pink;
        width: 150px;
        height:  50px;
       border-radius: 30px; 

    }
Out Put :

Those are the basic button css those are mostly used in the html documents.There are so many hover effects in the buttons. Buttons in html is so useful element every event handle with the buttons.