CSS Beginner Components

Simple CSS transition

How do I animate hover smoothly?

transition property.

.btn {
  background: #2563eb;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

Notes

Animate transform/opacity for smoother performance.

Keywords: transition · animation · hover

CSS

Three ways to apply CSS

What are inline, internal, and external CSS?

CSS

CSS box model

Why is my element wider than expected?

CSS

Margin vs padding

What is the difference between margin and padding?

CSS

display block inline flex

How does display change layout?

CSS

CSS position values

How do I pin an element or overlap layers?

CSS

CSS custom properties

How do I reuse colors with variables?