Skip to content

CSS examples

Chamfered primary button

.button-primary {
  min-height: 44px;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(135deg, #C93BCE, #8A48FF 48%, #21D4FF);
  border: 0;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
}

.button-primary:focus-visible {
  outline: 2px solid #21D4FF;
  outline-offset: 3px;
}

Dark ceramic card

.card {
  padding: 32px;
  background: #171326;
  border: 1px solid rgba(255,255,255,.09);
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  );
}

Reduced motion

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}