css button styles | button css | All About HTML button Tag

css button styles | button css |  All About HTML button Tag

 The <button> tag is used to create clickable buttons in your website/web page. We have difference between input tag button Or simple button. We can we add images in our button also or styling text into button tag.


I hope you got the better definition of the button, Let’s go straight forward and let’s see the syntax of the <button> tag.


<button type= “button”>Click Me!</button



Let’s see Using CSS Styles

You can also apply CSS styles to your <button> tag to change the appearance of the button, its size, color, text, and font, etc…

Let’ see example of <button> tag with CSS


<button style=”color: red;”>Click me</button>


html button types 

The <button> tag doesn’t have required attributes; however, I always use type= “button” attribute, if the tag used as ordinary button tag.

There are also some attributes available for the button tag where you can give and receive some animations, value, links, etc… Some of them are listed below:


1.   Autofocus: autofocus specifies that your button should receive focus after loading your page.


<button type=”button” autofocus>Click Me!</button>

2.   Disabled: disabled attribute deactivates your button means when the user clicks on that button it’ll be not clickable.

<button type=”button” disabled>Click Me!</button>


 3.   Type: There are also type of buttons like ordinary button, reset button that clears the form from the input data, submit button for sending form data.


4.   Value: Defines the value button.


5.   Form: It specifies the form button that belongs to, if the multiple button has multiple forms.



css button styles | How to style <button> tag?

Likewise, you can style button tag with those common properties:

 CSS font-style: Property sets the style of the font, like you can set italic, oblique.


CSS font-family: This property specifies the list of fonts like font-family some of them you can set are arial, sans-serif.


Coloring text in <button> tag:


       CSS color : property descries the color of your text that content and text decorations.


       CSS background-color:  property sets the background-color of the element.

Other properties of <button> tag:


       CSS text-shadow : property is another <button> ag property like css text shadow it specifies the shadow to the text.

 CSS text-align:  property sets the alignment of your text to the last line of the text.

  CSS word-spacing: property defines the spaces between your words/characters.

 Button styling css code  

 button {  
background-color: #4CAF50;
font-size: 16px;
font-family: serif;
border: none;
border-radius: 12px;
color: white;
text-shadow: 2px 2px #eeeff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;


html button onclick link

We can also add onclick event in <button> tag:

<button onclick=”codewithRandom()”>Click me</button>

 This was an example of HTML <button> tag. I hope you found it helpful and now your able to work with HTML button tag, For more such contents about HTML and CSS. Share this article with anyone whom will found this blogs helpful.

In this post, we learn css button styles | button css |  All About HTML button Tag example HTML . If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

 written by – Darshan


Share on:

Leave a Comment