Kasutaja kerib lehte, silmab pealkirju, pilte ja loendeid. Nupp „Registreeru" sulandub taustaga ja jääb märkamatuks. Selle all olevale vormile pole kolm päeva ühtegi sisestust tulnud. Klassikaline stsenaarium: nupp on olemas, aga klikke ei tule.

Lahendus ei ole 500-dollarine ümberkujundus ega sihtlehe ümberkirjutamine. Kolmkümmend rida CSS-i on piisav. Peen animatsioon (raputus, pulsatsioon või kuma) tõmbab pilgu nupule ilma tüütu vilkumiseta. Nielsen Norman Groupi uuringud kinnitavad, et liikuvad elemendid tõmbavad tähelepanu kolm korda kiiremini kui staatilised, kuid ainult siis, kui liikumine on põhjendatud ega konkureeri põhisisuga.

Allpool on kolm töötavat animeeritud CTA-nupu varianti koos kasutusvalmis koodiga. Alates lihtsast raputusest kuni kombineeritud pulsatsiooni ja kumani. Kopeeri ja kleebi.

💡 Kiirülevaade:

• HTML-skelett: minimaalne nupu märgistus koos modifikaator-klassiga, mida saab lisada igasse vormi või sihtlehele.
• Raputusefekt: nupp raputab iga 4 sekundi järel @keyframes abil, juhtides tähelepanu peamisele tegevusele ilma kasutajat ärritamata.
• Pulsatsiooniefekt: pehme varju pulsatsioon, alternatiiv saitidele, kus raputus tundub liiga agressiivne.
• CodePeni demo: elav näide, kus saad seadeid muuta ja tulemusi näha enne saidile lisamist.

HTML-märgistus: animeeritud nupu skelett

Märgistus on taotluslikult lihtne. Pole raamistikke, ainult puhas HTML. Üks nupp, üks klass.

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

Kolm asja, mida kohe tähele panna. Esiteks: type="submit" tähendab, et nupp töötab igas vormis ilma täiendava JavaScriptita. Teiseks: value on tekst, mida kasutaja näeb. Muuda see vastavalt vajadusele: „Laadi alla", „Registreeru" või midagi muud. Kolmandaks: modifikaator-klass animated-btn--shake juhib animatsiooni tüüpi. Asenda see --pulse või --glow vastu, et saada erinev efekt ilma märgistust muutmata.

Kui lisad nupu väljaspool vormi, mähi see <a href="..."> sisse ja asenda input elemendiga <button>. Allolevad stiilid töötavad mõlema variandiga.

CSS-animatsioon: raputusefekt

Raputus on neist kolmest efektist kõige märgatavam. Nupp võbiseb iga 4 sekundi järel 3-5 pikslit vasakule ja paremale. Kasutaja kerib lehte, märkab liikumist perifeerses nägemises ja suunab pilgu nupule. Neli sekundit on piisav, et animatsioon ei muutuks tüütuks rämpsuks.

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
}

Vaatame läbi peamised otsused. animation: shake 4s ease-in-out infinite: meie näites kestab täistsükkel mitu sekundit, kuid animatsioon on aktiivne vaid väikese osa sellest ajast. Ülejäänud aja on nupp paigal. See on oluline: pidev raputamine ärritab, samas kui mõõdetud liikumine tõmbab tähelepanu.

transform-origin: center center fikseerib pöörlemispunkti keskele, et nupp ei „triiviks" pöörlemise ajal küljele.

rotate() 1 kraadi võrra lisab realistlikkust. Puhas translateX näeb välja mehaaniline; kerge kalle loob illusiooni füüsilisest jõust, justkui keegi tõmbaks nuppu nöörist.

Lisa kujundus oma disainiga sobitamiseks: taustavärv background kaudu, nurmade ümardamine border-radius abil, polsterdus ja fondi suurus font-size abil. Animatsioon ei sõltu kujundusest ja töötab kõigi värvide ja suurustega.

Variatsioon: pulsatsiooniefekt

Raputus ei sobi igale poole. Ettevõtte panga või meditsiinikliiniku veebisaidil näeb raputav nupp kohatu välja. Pulsatsioon pakub rahulikumat viisi tähelepanu tõmbamiseks: nupu vari laieneb ja tõmbub sujuvalt kokku, luues „hingava" efekti.

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
}

Vari laieneb nupust 12 piksli võrra ja hajub läbipaistvaks. Tsükkel on 3 sekundit, veidi kiirem kui raputus, sest pulseerimine on vähem pealetükkiv ja silm andestab kiirema rütmi.

Asenda rgba() sees oma värv. Valem: võta nupu põhivärv ja sea selle alfa algses võtmekaadris 0,5-le ja lõppkaadris 0-le. Rohelise nupu jaoks kasuta rgba(46, 139, 87, 0.5); sinise jaoks rgba(41, 128, 185, 0.5).

Sa võid raputust ja pulsatsiooni samal nupul kombineerida, kuid me ei soovita seda. Kaks samaaegset liikumist põrkuvad ja näevad segased välja. Vali üks, lähtudes saidi iseloomust ja sihtrühmast.

CodePen: elav näide

Oleme CodePeni postitanud kasutusvalmis koodi mõlema animatsioonivalikuga. Ava see, muuda kestust, värve, polsterdust ja vaata tulemusi reaalajas.

Saidile lisamine täiendava CSS-i kaudu (Välimus → Kohanda → Lisatud CSS) võtab minuti. Kopeeri vajalik plokk, kleebi, salvesta. Sinu teema märgistuses või vormi pluginas olev nupp võtab stiilid klassi alusel üle.

Kui kasutad WordPressi, on tee veelgi lühem: mine administraatori paneelile, ava leht või postitus redaktoris, leia nupp ja lisa ploki seadetes klass animated-btn animated-btn--shake. Paiguta stiilid lisatud CSS-i ja need laaditakse esiküljel ilma teemafaile muutmata.

Ülaltoodud video on praktiline õpetus raputusefekti nullist loomiseks. Autor demonstreerib protsessi reaalajas: märgistusest kuni viimaste viimistlusteni DevToolsis (inglise keeles, 4 minutit).

⁉️🤔 Korduma kippuvad küsimused

Kas animatsioon aeglustab lehe laadimist?

Kolmkümmend rida CSS-i kaalub isegi tihendamata alla 1 KB. Pole lisaraamatukogusid, pole JavaScripti. Lehe laadimisaeg ei muutu. Võrdluseks: üks Font Awesome'i ikoon kaalub keskmiselt 2-3 KB.

Kas animatsioon töötab mobiilis?

Jah, transform ja box-shadow on riistvaraliselt kiirendatud iOS-is ja Androidis alates 2016. aasta versioonidest. Ainus nüanss: Safari enne versiooni 15 kohati kokutab box-shadow sagedaste ümberjoonistuste ajal. Paranda see, lisades pulsatsiooninupule will-change: box-shadow.

Kuidas keelata animatsioon vestibulaarhäiretega kasutajatele?

Mähi animatsioon @media (prefers-reduced-motion: no-preference) sisse. Siis, kui opsüsteemis on lubatud seade „Vähenda liikumist", jääb nupp staatiliseks. Kaasaegsed brauserid toetavad seda meediapäringut alates 2019. aastast.

Kas ma saan animatsiooni käivitada ainult hõljumisel?

Asenda infinite väärtusega none atribuudis animation, seejärel kirjelda hõljumise olek eraldi: .animated-btn:hover { animation: shake 0.4s ease-in-out; }. Nupp raputab hõljumisel ühe korra ja peatub. See toimib olukordades, kus autonoomne animatsioon on disainiga vastuolus.

Miks mu nupp ei animeeru pärast koodi kleepimist?

Kolm levinud põhjust: klass on valesti kopeeritud (kontrolli animated-btn--shake kahe sidekriipsuga); teema CSS-fail kirjutab animation üle (lisa !important või suurenda selektori spetsiifilisust); nupp on konteineris, millel on overflow: hidden, mis lõikab pulsatsiooni varju ära.

Animeerida või mitte animeerida: lõplik kokkuvõte

Raputusefekt, pulsatsiooniefekt või staatiline nupp: valik sõltub kontekstist, mitte trendidest. Kommertslik sihtleht ühe CTA-nupuga? Raputus iga 4 sekundi järel, ilma küsimuseta. Administraatori paneel või armatuurlaud kümnete nuppudega ekraanil? Hoia need staatilisena ja animeeri ainult peamist tegevust. Ettevõtte sait konservatiivse sihtrühmaga? Pulsatsiooni esiletõst, minimalistlik ja soliidne.

Reegel, mille oleme tuletanud kümnetest A/B testidest: animeeritud nupp suurendab konversiooni mõne protsendipunkti võrra, eeldusel, et animatsioon on ainulaadne ega konkureeri tähelepanu pärast naaberelementidega. Kaks animeeritud nuppu kõrvuti tähendab madalamat konversiooni, sest kasutaja satub segadusse ega klõpsa kumbagi.

Kopeeri kood ülaltoodud jaotisest, kohanda värvid ja kestus oma projekti jaoks. Kui tulemus meeldib, vaata meie valikut vahemällu salvestamise pluginatest. Need aitavad säilitada saidi kiirust isegi tosina animeeritud elemendiga lehel.