Liukuväripainikkeet CSS:llä, jotka tuntuvat premium-tasoisilta

Premium-näköisen liukuväripainikkeen CSS:n kirjoittaminen tiivistyy hillintään. Valitse kaksi vierekkäistä sävyä samanlaisella vaaleudella, lisää himmeä korostus yläreunaan, liikuta liukuväriä hoverissa sen vaihtamisen sijaan ja tarkista, että teksti luetaan vaaleinta osaa vasten. Äänekäs, sateenkaarireunainen versio on helppo tehdä ja helppo tunnistaa mallipohjaksi. Hiljainen versio on se, mikä saa tuotteen tuntumaan valmiilta.

.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);
}

Hillityt ja äänekkäät liukuväripainikkeet

Hillitty painike käyttää kahta väriympyrällä vierekkäistä sävyä, kuten indigoa ja purppuraa, jolloin liukuväri näyttää syvyydeltä koristeen sijaan. Äänekäs painike kattaa etäisiä sävyjä ja on sivun värikkäin asia. Äänekäs voi toimia yksittäiselle lanseeraushetkelle tai leikkisälle brändille, hillitty toimii kaikkialla muualla. Jokainen alla oleva paletti pitää valkoisen tekstin yli 4,5:n kummassakin päässä.

Tekstin kontrasti liukuväripainikkeissa

Kontrastintarkistin ottaa yhden taustavärin, mutta painikkeella on vaihteluväli. Tarkista tekstin väri vaaleinta pysäytystä vasten, koska juuri siellä nimiö on heikoimmillaan. Tavallisen kokoinen painikkeen teksti tarvitsee 4,5:1 WCAG:n mukaan, ja WebAIMin kontrastintarkistin tekee jokaisesta pysäytyksestä nopean tarkistuksen. Tavallinen virhe on lämmin liukuväri, joka päättyy keltaiseen tai vaaleaan oranssiin, mikä näyttää energiseltä ja jättää puolet nimiöstä lukukelvottomaksi.

Lisää laskennasta ja rajoista on oppaassa värikontrasti ja saavutettavuus, ja sama sääntö pätee mihin tahansa tekstiin liukuvärillä.

Sujuvat hover-tilat liukuväripainikkeille

background-image ei siirry: vaihda liukuväri toiseen hoverissa, ja se napsahtaa. Sujuvia vaihtoehtoja on kaksi. Ensimmäinen, jota käytetään yllä olevassa reseptissä, on piirtää liukuväri kaksi kertaa leveämpänä ja liu'uttaa background-positionia. Toinen on laittaa hover-liukuväri pseudoelementille ja häivyttää sen opacityä, mikä sopii hovereille, jotka muuttavat väriä kokonaan.

.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;
}

Pidä hover-muutokset pieninä. Liukuväri, joka siirtyy hieman, ja varjo, joka syvenee vähän, tuntuvat reagoivilta. Painike, joka muuttaa sävyään kokonaan, tuntuu epävakaalta. Jos lisäät jatkuvaa liikettä, kuten hidasta kimmellystä, poista se käytöstä niiltä, jotka haluavat vähennettyä liikettä.

Reunukset, ääriviivat ja toissijaiset painikkeet

Yksi liukuväripainike per näyttö on yleensä oikein: se merkitsee ensisijaisen toiminnon. Toissijaiset toiminnot näyttävät paremmilta ääriviivatyylillä, joka toistaa liukuvärin ohuessa reunassa. Kaksi taustaa, yksi rajattu padding-boxiin ja yksi border-boxiin, antavat pyöristetyn liukuväriääriviivan yhtenäisellä keskikohdalla.

.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;
}

Pois käytöstä ja latautuu -tilat

Käytöstä poistetun liukuväripainikkeen pitäisi lakata näyttämästä kutsulta. Poista liukuväri kokonaan pelkän opacityn laskemisen sijaan, mikä voi jättää haalean, yhä värikkään painikkeen, jota ihmiset yrittävät painaa. Tasainen, matalakontrastinen harmaa ja cursor: not-allowed luetaan selvästi ei-saatavilla olevaksi. Latautumista varten säilytä liukuväri ja vaihda nimiö pyörivään ilmaisimeen, jotta painike ei hypi koossa.

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

Viimeistelyt, jotka näyttävät premium-tasoisilta

• Yläkorostus. inset 0 1px 0 rgb(255 255 255 / 0.25) vihjaa valonlähteestä yläpuolella ja antaa pinnalle vähäisen kaarevuuden.
• Sävytetty varjo. Varjo painikkeen omassa sävyssä mustan sijaan saa sen hehkumaan leijumisen sijaan.
• Yksi kulma kaikelle. Käytä samaa liukuvärin kulmaa, kuten 110deg, jokaisessa liukuväriohjaimessa.
• Brändivärit, ei valmiita esiasetuksia. Häivytyksen pitäisi tulla paletistasi. Liukuväribrändäys selittää miksi.
• Kartiomainen kiilto, säästeliäästi. Himmeä kartiomainen kerros voi lisätä metallisen välähdyksen. Katso CSS-kartiomaiset liukuvärit.