Telegram Group Join Now

Create Button in HTML and Style Button with CSS

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

I hope you got a 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

Output

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…

Create A Travel Website Using HTML & CSS

Let’s see an example of <button> tag with CSS

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

Output

Html Button Types

The <button> tag doesn’t have required attributes; however, I always use the type= “button” attribute, if the tag is used as an 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.

Code

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

Restaurant Website Using HTML And CSS With Source Code

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

Output

3. Type: There are also types of buttons like the ordinary button, the 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 if the multiple buttons have multiple forms.

How to style <button> tag in Css?

CSS Button Styles Property

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

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

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

15 Add to Cart button Using HTML & JavaScript

Coloring text in <button> tag:

CSS color: property describes 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: the property is another <button> ag property like css text-shadow it specifies the shadow of 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;
}

Output

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Add OnClick in Button Html Code

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

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

This was an example of an HTML <button> tag. I hope you found it helpful and that now you’re able to work with HTML button tags, For more such content about HTML and CSS. Share this article with anyone who will find this blog helpful.

In this post, we learn how to create buttons and how to give styles to buttons in css. If we did a mistake or any confusion please drop a comment to give a reply or help you in easy learning.

written by – Darshan

Team_codewithrandom

Telegram Group Join Now

Create Button in HTML and Style Button with CSS

Let’s see Using CSS Styles

Html Button Types

How to style <button> tag in Css?

Button Styling Css Code

Telegram Group Join Now

Leave a Comment Cancel reply