CSS Pseudo-class

This button uses the :hover pseudo-class to create a hover animation.
Hover over the button to see the effect.

<style>
  .my-button {
    background-color: white;
    color: #302ea3;
    padding: 5px;
    border: 2px solid #302ea3;
  }

  .my-button:hover {
    background-color: #302ea3;
    color: white;
    cursor: pointer;
  }
</style>

<button class="my-button">
  Hover this button
</button>

The syntax for pseudo-classes.

selector:pseudo-class {
  property:value;
}

• The selector refers to the element(s) to be styled.
• The :pseudo-class is the state, for example :hover, :active, or :focus.
• The : (colon) after the selector signifies that a specified state follows.
• property:value is a regular CSS property value

Below is a list of all CSS pseudo classes.

• Our HTML Pseudo-elements Tutorial
• Our CSS Reference Guide
• Our HTML Attribute List