תוכן עניינים

בעידן הדיגיטלי של היום, חשוב לא רק שהאתר שלך יהיה פונקציונלי, אלא גם שהוא יראה טוב ויגרום למבקרים להישאר.

אחת הדרכים להוסיף חיים לאתר שלך היא על ידי הוספת אפקטים חזותיים מרשימים.

אפקט משאבה (Pump Effect) באמצעות CSS,הוא אפקט שיכול להוסיף הרבה לאתר שלך, יוצר יותר המרות, וגורם ליותר אנשים ללחוץ על הכפתור.

האפקט מבליט כפתור ספציפי ולא מומלץ להשתמש בו למספר רב של כפתורים כדי לא לבלבל את הגולש!

CSS

				
					/* הגדרת סגנון לאלמנטים עם מחלקת 'pump-effect' */
    .pump-effect {
      /* מרכז את האלמנט באופן אוטומטי באופן אופקי */
      margin-right:auto;
      margin-left:auto;
      
      /* קביעת רוחב וגובה האלמנט */
      width: 100px;
      height: 100px;

      /* קביעת צבע רקע וצבע טקסט */
      background-color: #FF914D;
      color: black;

      /* הגברת המשקל של הטקסט והגדלת המרחק בין האותיות */
      font-weight:700;
      letter-spacing: 1px;

      /* הפיכת האלמנט לפלקסבוקס ומרכוז התוכן בתוכו */
      display: flex;
      justify-content: center;
      align-items: center;

      /* יצירת צורה עגולה לאלמנט */
      border-radius: 50%;

      /* הוספת אנימציה שנקראת 'pump' שתתרחש אינסוף פעמים, כל שנייה */
      animation: pump 1s infinite;
      
      /* כאשר העכבר עובר מעל האלמנט, הסמן יהפוך ללחצן */
      cursor: pointer;
    }

    /* הגדרת האנימציה 'pump' */
    @keyframes pump {
      /* ב-0% ו-100% מזמן האנימציה, אין שינוי בגודל */
      0%, 100% {
        transform: scale(1);
      }
      /* ב-50% מזמן האנימציה, האלמנט יגדל ל-1.2 מגודלו המקורי */
      50% {
        transform: scale(1.2);
      }
    }
				
			

HTML

				
					<div class="pump-effect">לחץ עלי!</div>
				
			

בעידן הדיגיטלי של היום, חשוב לא רק שהאתר שלך יהיה פונקציונלי, אלא גם שהוא יראה טוב ויגרום למבקרים להישאר.

אחת הדרכים להוסיף חיים לאתר שלך היא על ידי הוספת אפקטים חזותיים מרשימים. 

הכפתור יעיל כדי למשוך את תשומת הלב של הגולשים באתר, ומניע את הלקוח לפעולה, אנו לא ממליצים להשתמש באפקט זה למספר רב של כפתורים כדי לא לבלבל את הגולשים

איך משתמשים בקוד?

כדי ליישם את האפקט באתר שלך, פשוט העתק את קטע הקוד הזה לתוך ה-HTML וה-CSS של הדף בו אתה רוצה שהאפקט יופיע. זהו דרך מעולה לגרום לאלמנטים מסוימים לבלוט ולהפוך את האתר שלך ליותר מושך ואינטראקטיבי.

עדיין לא הסתדרת?

דוגמה
לחץ עלי!
דילוג לתוכן