Hvordan legge til en pulseffekt til en knapp i Squarespace
I denne bloggopplæringen lærer du trinn for trinn hvordan du lager en pulserende effekt for Squarespace-knapper
La oss dykke inn..
Se videoen
Sjekk ut YouTube-videoen nedenfor 👇
Når vi har satt opp en knapp, må vi finne det tilpassede CSS-alternativet i Squarespace-menyen. Når du er inne i den tilpassede CSS-delen, limer du inn koden nedenfor.
@keyframes pulse-glow {
0 %, 100 % {
transform: skala(1);
boks-skygge: 0 0 0 0 rgba(52, 152, 219, 0,7); /* Skygge */
}
50 % {
transform: skala(1);
box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); /* Skygge */
}
}
#siteWrapper .sqs-block-button a.sqs-button-element--primary {
bakgrunnsfarge: #3498db !viktig; /* Blå farge */
farge: hvit !viktig; /* Tekst på bunnfarge */
kantradius: 5px; /* Valgfritt: Juster for avrundede hjørner */
overgang: transformere 2s lett-inn-ut;
animasjon: puls-glød 2s uendelig;
}
Fortsetter under bildet.
Når den tilpassede koden er lagt til, vil du umiddelbart se knappen vises. Husk at for at dette skal fungere, må det være en "Primærknapp". Men hvis du foretrekker at det skal være en sekundær eller tertiær knapp, er det bare å bytte ut --primær med ønsket stil.
Den medfølgende koden lar deg også tilpasse farger og elementer i animasjonen. Sjekk videoen for full oversikt.
Din designer
Jeg er Victor Rolf, en ekspert Squarespace-designer. Hvis du vil diskutere et potensielt prosjekt, kan du sende meg en e-post på victor@rolfmade.com eller ta kontakt her . Alternativt kan du sette opp en gratis 15-minutters konsultasjonssamtale her.
