וואטסאפ היא אפליקציה פופלארית להעברת מסרים וליצירת קשר נוח וזמין עם הגולש. אספנו עבורכם שלושה קטעי קוד שימושים ומגניבים לאנימציות css לכפתורים שמטרתן להסב את תשומת לב הגולש לחווית משתמש טובה יותר.
כל מה שצריך לעשות כדי להוסיף אנימציה לכפתור וואטסאפ באתר זה להוסיף וידג׳ט אייקון של וואטסאפ או כל כפתור אחר, לעדכן את הקישור לוואטסאפ, לעצב אותו בהתאם לצורך ולהוסיף לו את הcss הרצוי במתקדם > css מותאם.
וזהו – בהצלחה!
כפתור וואטסאפ מהבהב
selector {
animation: my-anim 1s ease-in-out infinite;
}
@keyframes my-anim {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
כפתור וואטסאפ מרחף באיטיות
selector {
animation: down-up 2.5s ease-in-out infinite;
}
@keyframes down-up {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
כפתור וואטסאפ קופץ
selector {
animation: bounce 1.2s infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
