Course 12 demo

Interaction states

Test these controls with a mouse, then press Tab to check the keyboard focus state.

Start project View details

Prototype review

Checkout flow polish

Ready

CSS used in this demo

.primary-button:hover {
  background: #263fa8;
  transform: translateY(-2px);
}

.primary-button:active {
  transform: translateY(1px) scale(0.98);
}

.button:focus-visible,
.project-card:focus-visible,
.nav-button:focus-visible {
  outline: 3px solid #f6b73c;
  outline-offset: 4px;
}

.hover-flip-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateY(100%);
}

.hover-flip-text span,
.hover-flip-text::after {
  transition-property: transform;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.hover-flip-text:hover span,
.hover-flip-text:focus-visible span {
  transform: translateY(-200%);
}

.hover-flip-text:hover::after,
.hover-flip-text:focus-visible::after {
  transform: translateY(0);
}