Telegram Group Join Now
ADVERTISEMENT
Create Button in HTML and Style Button with CSS
ADVERTISEMENT
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
ADVERTISEMENT
Â
ADVERTISEMENT
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
ADVERTISEMENT
<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:
ADVERTISEMENT
1. Autofocus: autofocus specifies that your button should receive focus after loading your page.
ADVERTISEMENT
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
Â
ADVERTISEMENT
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.
ADVERTISEMENT
4. Value: Defines the value button.
ADVERTISEMENT
5. Form: It specifies the form button that belongs if the multiple buttons have multiple forms.
ADVERTISEMENT
Â
ADVERTISEMENT
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
ADVERTISEMENT