Hover-animaatio kaikkiin sivuston buttoneihin kerralla yhdellä CSS-koodilla

Pieni animaatio, joka tuo sivustollesi lisää elävyyttä

Haluaisitko, että Squarespace-sivustosi buttonit suurenevat hieman, kun kävijä vie hiiren niiden päälle? Pieni hover-animaatio tekee painikkeista kiinnostavampia ja tuo sivustolle viimeisteltyä, interaktiivista ilmettä.

Squarespacessa voit lisätä yksittäisiin tavallisiin painikkeisiin erilaisia animaatioita suoraan sivuston omilla työkaluilla, ilman koodaamista. Voit esimerkiksi määrittää painikkeen suurenemaan (samalla tavalla kuin tässä CSS koodissa) kun hiiri viedään sen päälle.

Mutta entä jos haluat saman animaation kaikkiin sivustosi buttoneihin?

Sen sijaan, että kävisit lisäämässä animaation jokaiseen buttoniin erikseen Squarespacen omilla työkaluilla, voit hyödyntää tätä yhtä valmista CSS-koodia, joka tekee muutoksen kerralla sivustosi kaikkiin buttoneihin.

Tämän Squarespace-miniohjeen avulla saat buttonisi suurenemaan pehmeästi haluamasi prosenttimäärän hiiren ollessa niiden päällä. Sinun tarvitsee vain kopioida valmis koodi ja liittää se sivustollesi ja määritellä haluamasi suurennusprosentti.

Mitä ohje sisältää?

Ohjeessa käydään käytännönläheisesti läpi:

• miten lisäät valmiin CSS-koodin Squarespace-sivustollesi

• miten saat buttonit suurenemaan haluamasi prosenttimäärän hiiren ollessa niiden päällä

• miten voit muuttaa buttoneiden suurenemisen määrää

• miten säädät animaation nopeutta

• miten voit tarvittaessa poistaa animaation

Saat käyttöösi valmiin, kopioitavan CSS-koodin sekä selkeät ohjeet sen asentamiseen ja muokkaamiseen.

Koodi on suunniteltu toimimaan Squarespace 7.1 -sivuston tavallisiiin buttoneihin isekä useissa muissa painiketyypeissä, kuten headerin toimintapainikkeessa, lomakkeiden lähetyspainikkeissa ja ostoskoriin lisäyspainikkeissa. Osa Squarespacen erikoispainikkeista voi vaatia erillisiä määrityksiä.

Yksi koodi, monta animoitua painiketta

Hover-animaatio on pieni yksityiskohta, jolla voit tehdä sivustostasi elävämmän ja antaa kävijälle visuaalisen vihjeen siitä, että painiketta voi klikata.

Squarespacen omat animaatiotyökalut ovat käteviä silloin, kun haluat muokata yksittäisiä painikkeita. CSS-koodi puolestaan säästää aikaa, kun tavoitteena on saada samanlainen animaatio käyttöön mahdollisimman monessa painikkeessa koko sivustolla.

Yksi kopioitava koodi, yksi asennuskerta ja yhtenäinen hover-efekti sivustosi painikkeisiin.

Kenelle tämä valmis koodi ja ohje sopii?

Ohje ja valmiskoodi sopii sinulle, jos käytössäsi on Squarespace 7.1 ja haluat lisätä sivustosi painikkeisiin pienen visuaalisen yksityiskohdan mahdollisimman helposti. Katso miten tarkistat oman Squarespace -sivustosi version.

Olitpa rakentamassa ensimmäisiä Squarespace-sivujasi, viimeistelemässä olemassa olevaa sivustoa tai tekemässä verkkosivuja asiakkaillesi, tämän ohjeen avulla saat hover-animaation käyttöön ilman monimutkaista koodaamista. Voi käyttää samaa koodia kaikilla hallitsemillasi Squarespace sivustoilla.

Et tarvitse aikaisempaa CSS-osaamista. Saat ohjeet miten voit helposti kopioida ja liittää valmiin koodin Squarespaceen. Halutessasi voit myös muokata animaation voimakkuutta ja nopeutta oman sivustosi tyyliin sopivaksi.

Tämä on digitaalinen tuote, joka on käytettävissä heti oston jälkeen. Kun hyväksyt toimituksen aloitettavaksi heti ja annat nimenomaisen suostumuksesi peruuttamisoikeuden menettämiseen, menetät kuluttajansuojalain mukaisen 14 päivän peruuttamisoikeuden digitaalisen sisällön toimituksen alkaessa.