Create Button in HTML and Style Button with CSS

Create Button in HTML and Style Button with CSS

Create Button in HTML and Style Button with CSS
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

Style Button with CSS
Style Button with CSS

 

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

Style Button with CSS
Style Button with CSS

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

Style Button with CSS
Style Button with CSS

 

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.

ADVERTISEMENT

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

ADVERTISEMENT

15 Add to Cart button Using HTML & JavaScript

ADVERTISEMENT

Coloring text in <button> tag:

ADVERTISEMENT

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

ADVERTISEMENT

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)

Style Button with CSS
Style Button with CSS

 

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



Leave a Reply