Kleurverloopknoppen in CSS die premium aanvoelen

CSS voor kleurverloopknoppen die premium ogen draait om terughoudendheid. Kies twee naburige tinten met vergelijkbare lichtheid, voeg een vage highlight langs de bovenrand toe, verplaats het kleurverloop bij hover in plaats van het te vervangen en controleer dat de tekst leest tegen het lichtste deel. De luide versie met regenboograndje is makkelijk te maken en makkelijk als sjabloon te herkennen; de rustige versie geeft een product het gevoel af te zijn.

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.4em;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  background-color: #4f46e5;
  background-image: linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 6px 16px -6px rgb(79 70 229 / 0.6);
  transition: background-position 0.5s ease, transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.button:hover {
  background-position: 100% 50%;
}

.button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
}

Subtiele versus luide kleurverloopknoppen

Een subtiele knop gebruikt twee tinten die op het kleurenwiel naast elkaar liggen, zoals indigo en paars, zodat het kleurverloop als diepte leest in plaats van decoratie. Een luide knop overspant verre tinten en wordt het kleurrijkste op de pagina. Luid kan werken voor één lanceringsmoment of een speels merk; subtiel werkt overal elders. Elk palet hieronder houdt witte tekst aan beide kanten boven 4,5:1.

Tekstcontrast op kleurverloopknoppen

Een contrastchecker neemt één achtergrondkleur, maar een knop heeft een bereik. Controleer de tekstkleur tegen de lichtste stop, want daar is het label het zwakst. Knoptekst van normale grootte heeft onder WCAG 4,5:1 nodig, en met de contrastchecker van WebAIM is elke stop snel gecontroleerd. De gebruikelijke fout is een warm kleurverloop dat eindigt in geel of lichtoranje, wat energiek oogt en de helft van het label onleesbaar laat.

Meer over de wiskunde en de drempels staat in kleurcontrast en toegankelijkheid, en dezelfde regel geldt voor elke tekst op een kleurverloopachtergrond.

Vloeiende hoverstaten voor kleurverloopknoppen

background-image gaat niet vloeiend over: verwissel bij hover het ene kleurverloop voor het andere en het klapt om. Er zijn twee vloeiende alternatieven. Het eerste, gebruikt in het recept hierboven, is het kleurverloop twee keer zo breed te schilderen en background-position te laten schuiven. Het tweede is het hoverkleurverloop op een pseudo-element te zetten en zijn opacity te laten vervagen, wat past bij hovers die de kleur helemaal veranderen.

.button--fade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(110deg, #be123c, #c2410c);
}

.button--fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(110deg, #c2410c, #be123c);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button--fade:hover::before {
  opacity: 1;
}

Houd hoverwijzigingen klein. Een kleurverloop dat een beetje verschuift en een schaduw die iets dieper wordt voelen responsief; een knop die helemaal van tint verandert voelt onstabiel. Voeg je continue beweging toe, zoals een trage glinstering, zet die dan uit voor mensen die verminderde beweging verkiezen.

Randen, contouren en secundaire knoppen

Eén kleurverloopknop per scherm is meestal goed: hij markeert de primaire actie. Secundaire acties zien er beter uit in een omlijnde stijl die het kleurverloop in een dunne rand herhaalt. Twee achtergronden, één begrensd tot de padding box en één tot de border box, geven een afgeronde kleurverloopcontour met een effen midden.

.button--outline {
  border: 2px solid transparent;
  border-radius: 999px;
  color: #312e81;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(110deg, #4f46e5, #9333ea) border-box;
}

Uitgeschakelde en ladende staten

Een uitgeschakelde kleurverloopknop moet niet meer als uitnodiging ogen. Haal het kleurverloop helemaal weg in plaats van alleen de opacity te verlagen, want dat kan een vage, nog steeds kleurrijke knop achterlaten waar mensen op proberen te drukken. Een vlak, laag contrast grijs met cursor: not-allowed leest duidelijk als niet beschikbaar. Houd bij laden het kleurverloop en vervang het label door een spinner, zodat de knop niet van grootte springt.

.button:disabled {
  background-image: none;
  background-color: #e5e7eb;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
}

Afwerkingen die premium lezen

• Een highlight bovenaan. inset 0 1px 0 rgb(255 255 255 / 0.25) suggereert een lichtbron erboven en geeft het oppervlak een lichte welving.
• Een gekleurde schaduw. Schaduw in de eigen tint van de knop, in plaats van zwart, laat hem gloeien in plaats van zweven.
• Eén hoek voor alles. Gebruik dezelfde kleurverloophoek, zoals 110deg, op elk kleurverloopbesturingselement.
• Merkkleuren, geen voorinstellingen. De overgang moet uit je palet komen; kleurverloopbranding legt uit waarom.
• Een conic glans, spaarzaam. Een vage conic laag kan een metaalglans toevoegen; zie CSS conic gradients.