Styling Buttons & Hover

Definition: CSS can turn a plain button into an attractive, interactive one. The :hover selector applies styles only while the mouse is over the element.

A styled button

.btn {
  background: #2965f1;
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 8px;
  cursor: pointer;
}
.btn:hover { background: #1a4fd0; }

What makes it feel good

• border: none removes the default grey outline
• cursor: pointer shows the hand cursor on hover
• :hover changes the colour when pointed at
• transition makes that change smooth instead of instant

Run the example, then move your mouse over the button to see the hover effect.

💡 Tip: transition: background 0.2s is the small touch that makes buttons feel polished.