Käyttäjä selaa sivua, silmäilee otsikoita, kuvia ja listoja. "Rekisteröidy"-painike sulautuu taustaan ja jää huomaamatta. Sen alla olevaan lomakkeeseen ei ole tullut yhtään lähetystä kolmeen päivään. Klassinen tilanne: painike on olemassa, mutta klikkauksia ei tule.

Ratkaisu ei ole 500 dollarin uudelleensuunnittelu tai laskeutumissivun uudelleenkirjoitus. Kolmekymmentä riviä CSS:ää riittää. Hienovarainen animaatio (tärähdys, syke tai hehku) saa silmän huomaamaan painikkeen ilman ärsyttävää vilkkumista. Nielsen Norman Groupin tutkimus vahvistaa, että liikkuvat elementit kiinnittävät huomion kolme kertaa nopeammin kuin staattiset, mutta vain silloin, kun liike on perusteltua eikä kilpaile pääsisällön kanssa.

Alla on kolme toimivaa animoitua CTA-painikevaihtoehtoa valmiilla koodilla. Yksinkertaisesta tärähdyksestä yhdistettyyn syke-hehkuun. Kopioi ja liitä.

💡 Pikakatsaus:

• HTML-runko: minimaalinen painikkeen merkintä muokkainluokalla, joka voidaan upottaa mihin tahansa lomakkeeseen tai laskeutumissivulle.
• Tärähdysefekti: painike tärähtää 4 sekunnin välein @keyframes-määrityksen avulla, kiinnittäen huomion päätoimintoon ärsyttämättä käyttäjää.
• Syke-efekti: pehmeä varjosyke, vaihtoehto sivustoille, joissa tärähdys tuntuu liian aggressiiviselta.
• CodePen-demo: live-esimerkki, jossa voit säätää asetuksia ja nähdä tulokset ennen sivustolle lisäämistä.

HTML-merkintä: animoidun painikkeen runko

Merkintä on tarkoituksella yksinkertainen. Ei kehyksiä, pelkkää puhdasta HTML:ää. Yksi painike, yksi luokka.

1
<input type="submit" name="submit" value="Get Ticket!"
2
  class="animated-btn animated-btn--shake">

Kolme asiaa, jotka kannattaa huomata heti. Ensinnäkin: type="submit" tarkoittaa, että painike toimii minkä tahansa lomakkeen sisällä ilman ylimääräistä JavaScriptiä. Toiseksi: value on teksti, jonka käyttäjä näkee. Vaihda se tarpeesi mukaan: "Lataa", "Rekisteröidy" tai mitä tahansa muuta. Kolmanneksi: muokkainluokka animated-btn--shake ohjaa animaation tyyppiä. Korvaa se luokalla --pulse tai --glow saadaksesi eri efektin koskematta merkintään.

Jos lisäät painikkeen lomakkeen ulkopuolelle, kääri se <a href="...">-elementtiin ja korvaa input elementillä <button>. Alla olevat tyylit toimivat molempien vaihtoehtojen kanssa.

CSS-animaatio: tärähdysefekti

Tärähdys on kolmesta efektistä huomiota herättävin. Painike heiluu vasemmalle ja oikealle 3-5 pikseliä 4 sekunnin välein. Käyttäjä selaa sivua, havaitsee liikkeen ääreisnäöllään ja siirtää katseensa painikkeeseen. Neljä sekuntia riittää estämään animaatiota muuttumasta ärsyttäväksi roskapostiksi.

1
/* === Shake button === */
2
.animated-btn--shake {
3
  animation: shake 4s ease-in-out infinite;
4
  transform-origin: center center;
5
}
6
 
7
@keyframes shake {
8
  0%, 100%   { transform: translateX(0); }
9
  2%         { transform: translateX(-4px) rotate(-1deg); }
10
  4%         { transform: translateX(4px) rotate(1deg); }
11
  6%         { transform: translateX(-3px); }
12
  8%         { transform: translateX(3px); }
13
  10%        { transform: translateX(0); }
14
}

Puretaan keskeiset päätökset. animation: shake 4s ease-in-out infinite: esimerkissämme koko sykli kestää useita sekunteja, mutta animaatio on aktiivinen vain pienen osan siitä ajasta. Loppuajan painike pysyy paikallaan. Tällä on merkitystä: jatkuva tärinä on ärsyttävää, kun taas mitoitettu liike kiinnittää huomion.

transform-origin: center center kiinnittää kiertopisteen keskelle, jotta painike ei "ajele" sivusuunnassa kierron aikana.

Yhden asteen rotate() tuo realistisuutta. Pelkkä translateX näyttää mekaaniselta; pieni kallistus luo illuusion fyysisestä voimasta, aivan kuin joku olisi nykäissyt painiketta narusta.

Lisää tyylit sovittaaksesi painikkeen omaan designiisi: taustaväri background-määrityksellä, kulmien pyöristys border-radius-määrityksellä, täyte ja fontin koko font-size-määrityksellä. Animaatio ei riipu tyylittelystä ja toimii kaikilla väreillä ja ko'oilla.

Variaatio: syke-efekti

Tärähdys ei sovi kaikkialle. Yrityspankin tai lääkäriaseman verkkosivustolla tärisevä painike näyttää sopimattomalta. Syke tarjoaa rauhallisemman tavan kiinnittää huomio: painikkeen varjo laajenee ja supistuu pehmeästi luoden "hengittävän" efektin.

1
/* === Pulse button === */
2
.animated-btn--pulse {
3
  animation: pulse 3s ease-in-out infinite;
4
}
5
 
6
@keyframes pulse {
7
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.5); }
8
  50%      { box-shadow: 0 0 0 12px rgba(46, 139, 87, 0); }
9
}

Varjo laajenee painikkeesta 12 pikseliä ja häivyttyy läpinäkyväksi. Sykli on 3 sekuntia, hieman nopeampi kuin tärähdyksessä, koska sykkiminen on vähemmän tungettelevaa ja silmä sietää nopeampaa rytmiä.

Korvaa rgba()-määrityksessä oleva väri omallasi. Kaava: ota painikkeen pääväri ja aseta sen alfaksi 0.5 aloitusavainkehyksessä ja 0 lopetusavainkehyksessä. Vihreälle painikkeelle käytä rgba(46, 139, 87, 0.5); siniselle käytä rgba(41, 128, 185, 0.5).

Voit yhdistää tärähdyksen ja sykkeen samaan painikkeeseen, mutta emme suosittele sitä. Kaksi samanaikaista liikettä riitelevät keskenään ja näyttävät sotkuisilta. Valitse toinen sivuston luonteen ja yleisön perusteella.

CodePen: live-esimerkki

Olemme julkaisseet käyttövalmiin koodin molemmilla animaatiovaihtoehdoilla CodePenissä. Avaa se, muuta kestoa, värejä, täytettä ja katso tuloksia reaaliajassa.

Sivustolle upottaminen Lisä-CSS:n kautta (Ulkoasu → Mukauta → Lisä-CSS) vie minuutin. Kopioi tarvitsemasi lohko, liitä se, tallenna. Teemasi merkinnässä tai lomake-lisäosassa oleva painike poimii tyylit luokan perusteella.

Jos käytät WordPressiä, polku on vielä lyhyempi: mene hallintapaneeliin, avaa sivu tai artikkeli editorissa, etsi painike ja lisää luokka animated-btn animated-btn--shake lohkon asetuksissa. Sijoita tyylit Lisä-CSS:ään, niin ne latautuvat julkisella puolella ilman teematiedostojen muokkaamista.

Yllä oleva video on käytännönläheinen opastus tärähdysefektin luomiseen alusta alkaen. Tekijä esittelee prosessin reaaliajassa: merkinnästä lopullisiin hienosäätöihin DevToolsissa (englanti, 4 minuuttia).

⁉️🤔 Usein kysytyt kysymykset

Hidastaako animaatio sivun latautumista?

Kolmekymmentä riviä CSS:ää painaa alle 1 kt ilman pakkaustakin. Ei ylimääräisiä kirjastoja, ei JavaScriptiä. Sivun latausaika ei muutu. Vertailun vuoksi: yksi Font Awesome -kuvake painaa keskimäärin 2-3 kt.

Toimiiko animaatio mobiilissa?

Kyllä, transform ja box-shadow ovat laitteistokiihdytettyjä iOS:llä ja Androidilla vuoden 2016 versioista alkaen. Ainoa varaus: Safari ennen versiota 15 pätkii toisinaan box-shadow-määritystä toistuvien uudelleenpiirtojen aikana. Korjaa tämä lisäämällä will-change: box-shadow sykepainikkeeseen.

Miten poistan animaation käytöstä käyttäjiltä, joilla on vestibulaarisia häiriöitä?

Kääri animaatio @media (prefers-reduced-motion: no-preference) -määrityksen sisään. Tällöin, jos käyttöjärjestelmän "Vähennä liikettä" -asetus on käytössä, painike pysyy staattisena. Nykyaikaiset selaimet ovat tukeneet tätä media queryä vuodesta 2019.

Voinko laukaista animaation vain hover-tilassa?

Korvaa infinite arvolla none animation-ominaisuudessa ja kuvaa sitten hover-tila erikseen: .animated-btn:hover { animation: shake 0.4s ease-in-out; }. Painike tärähtää kerran hover-tilassa ja pysähtyy. Tämä toimii tilanteissa, joissa autonominen animaatio on ristiriidassa designin kanssa.

Miksi painikkeeni ei animoidu, kun liitän koodin?

Kolme yleistä syytä: luokka kopioitiin väärin (tarkista animated-btn--shake kahdella yhdysviivalla); teeman CSS-tiedosto yliajaa animation-määrityksen (lisää !important tai nosta valitsimen spesifisyyttä); painike on säiliössä, jossa on overflow: hidden, joka leikkaa sykevarjon.

Animoida vai ei: lopullinen erittely

Tärähdysefekti, syke-efekti vai staattinen painike: valinta riippuu kontekstista, ei trendeistä. Kaupallinen laskeutumissivu, jossa on yksi CTA-painike? Tärähdys 4 sekunnin välein, ehdottomasti. Hallintapaneeli tai kojelauta, jossa on kymmeniä painikkeita ruudulla? Pidä ne staattisina ja animoi vain päätoiminto. Yrityssivusto, jolla on konservatiivinen yleisö? Syke-korostus, minimalistinen ja arvokas.

Kymmenistä A/B-testeistä johtamamme sääntö: animoitu painike nostaa konversiota muutamalla prosenttiyksiköllä, edellyttäen, että animaatio on ainutlaatuinen eikä kilpaile huomiosta viereisten elementtien kanssa. Kaksi animoitua painiketta vierekkäin tarkoittaa alhaisempaa konversiota, koska käyttäjä hämmentyy eikä klikkaa kumpaakaan.

Kopioi koodi yllä olevasta osiosta, sovita värit ja kesto projektiisi. Jos pidät tuloksesta, tutustu välimuistilisäosien valikoimaamme. Ne auttavat ylläpitämään sivuston nopeutta, vaikka sivulla olisi tusina animoitua elementtiä.