How to Use CSS to style buttons (with hover effect)

The button element - Styled with CSS

Use the :hover selector to change the style of the button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover" effect:

index.html

Example: HTML

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

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

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

What is HTML <button> Tag

HTML Button

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