How to Use CSS to style buttons

The button element - Styled with CSS

Change the background color of a button with the background-color property:

index.html

Example: HTML

 <!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #04AA6D;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>

</body>
</html>

Output should be:

Single Articles

Example of HTML <button> Tag	HTML Button
Definition and Usage of HTML <button> Tag	HTML Button
Browser Support of HTML <button> Tag	HTML Button
Attributes of HTML <button> Tag	HTML Button
Global Attributes of HTML <button> Tag	HTML Button
Event Attributes of HTML <button> Tag	HTML Button
How to add A clickable button is marked up as follows	HTML Button
How to Use CSS to style buttons	HTML Button
How to Use CSS to style buttons (with hover effect)	HTML Button

HTML <button> Tag

HTML Button

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Button
Uploaded by:	Admin