Make the Primary Action Stand Out

#contrastvon-restorff

Style the main CTA with contrast (color, weight, size) so it's the one that gets remembered and clicked.

Why it works: Von Restorff Effect — the item that differs from the rest is most likely to be remembered; one primary button wins.

live_demo

code

.von-demo .btn.primary {
  background: var(--mint);
  border-color: var(--mint);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 24px rgba(29, 127, 83, 0.25);
}

.von-demo .btn:not(.primary) {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}