41 כפתורי CSS בחינם עם מעט JavaScript

כפתורי CSS בחינם

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

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

כפתור תלת מימד

כפתור תלת מימד

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

כפתור תלת מימד ללחיצה

כפתור תלת מימד ללחיצה

זה כפתור תלת מימד ב- CSS יש לו את היכולת שהאנימציה תתחיל לרוץ ככל שנאריך את הפעימה שלה.

כפתור חזרה

כפתור חזרה

כפתור CSS זה ייקח אותנו לראש אתרנו כשעברנו את זה.

כפתור בועה

כפתור בועה

כפתור בועה ב- CSS ו- JavaScript שכאשר לוחצים עליו תתיז בסדרת בועות עם אנימציה בולטת ומתאימה.

כפתור הוספה

כפתור הוספה

א אנימציה חיננית נותן חיים בכפתור הזה כדי להוסיף ב- CSS שיכול להיות אחד מאותם אלמנטים שמבליטים את האתר שלנו.

כפתור קיזוז CSS

לקזז

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

סגירת כפתור

לסגור

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

כפתור סגירה של CSS

כפתור סגירה של CSS

באותה תקופה ש בוא נעזוב את מצביע העכבר בכפתור הסגירה הזה נוכל לגלות את האנימציה האיכותית שנשלב ברשת.

כפתור הורדת CSS

כפתור הורדת CSS

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

כפתור הורדה

כפתור הורדה

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

אנימציית כפתור הורד

הורדת אנימציה

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

כפתור העכבר

כפתור העכבר

כפתור זה מחכה לכם השאר את מצביע העכבר למעלה כדי שתוכלו לראות את האנימציה יוצאת הדופן שהיא יוצרת.

כפתור רעש

כפתור רעש

כפתור רחף נוסף שמתבלט בו אנימציה מחשמלת המתרחש כאשר מרחף מעל המצביע.

אפקט רחף

אפקט רחף

אפקט מרחף מעניין נוסף ב- CSS הבולט בזכותו אנימציה מהירה וזריזה שמייצר תחושות טובות.

אפקט רחף מסוגנן

סגנון רחף

כפתור אחד מרחף עם סגנון נהדר באנימציה לאתרים עם נגיעה קלאסית.

אפקט דביק

אפקט דביק

Un אפקט פשוט וסקרן מה שמגדיל את גודל כפתור CSS עם מעט HTML.

כפתור פס

כפתור פס

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

שלוש אפקטים של כפתור CSS

שלוש אפקטים

שלוש אפקטים של CSS באנימציה של הכפתור ושניתן לשקול סגנון נהדר.

כמו כפתור הטוויטר

כמו כפתור הטוויטר

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

כמו כפתור אנימציה

כמו כפתור אנימציה

כאן יהיו הלבבות אלה שקופצים משמחה כשלוחצים על כפתור הדומה.

כפתור כמו להתיז

ספלט

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

כפתור הפעלה

רבייה

כפתור הפעלה שיתחיל לקפוץ, גם לשמחה, כשלוחצים עליו.

לחצן הפעלה של CSS

השמעת CSS

אנימציה תמחק את היקף סביב הסמל הפעלה של לחצן CSS זה.

כפתור השהיה / הפעלה

השהיית השמעה

רק כפתור להשהות / לשחק בנגיעה מינימלית בעיצוב.

כפתור פשוט רטרו

רטרו

כאילו אנו לוחצים על כפתורים בבקר משחק מקונסולה כמו ה- XboX.

כפתור קשת

קשת בענן

כפתור עם אנימציה בקשת המשחזר את ההודעות המגיעות ל- Galaxy S8.

כפתור חברתי

חֶברָתִי

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

אנימציה צפה

אנימציה צפה

כפתור עם אנימציה איכותית זה מופעל ברגע שאנחנו לוחצים עליו.

אייקונים חברתיים תלת ממדיים

אייקונים חברתיים תלת ממדיים

Un אפקט מושך תשומת לב וזה קורה כשאנחנו משאירים את המצביע לנוח.

כפתורים חברתיים

כפתורים חברתיים

אלה כפתורים חברתיים משתמשים באנימציה זה משנה את הצבע מלמעלה כדי להבדיל בין השאר.

כפתורים חברתיים מעוקבים

כפתורים חברתיים מעוקבים

כפתורים אלה הם ממוקם בקוביה שנע בצורה מושלמת כשאנחנו משאירים את המצביע עליו.

לחצני שיתוף

לחצני שיתוף

Un כפתור שיתוף מובחנת באנימציה מחזורית אינסופית.

לחצן שיתוף מדיה חברתית ב- SVG

לחצני שיתוף svg

פשוט לחץ על כפתור השיתוף ו תוכלו למצוא את האפקט האלוקי המתרחש בכפתור מדיה חברתית זה.

לחצן שיתוף דביק

שתף גוי

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

נתח

נתח

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

כפתור ביקורות כוכבים

כפתור ביקורות כוכבים

כפתור רחף שאוסף את הציון שאתה הולך לתת כשתעזוב את המצביע.

לחצן ציון SVG

כפתור SVG ציון

כפתור רחף נוסף עבור ציון עם ציון מוצר או כל דבר אחר.

כפתור טעינה

כפתור טעינה

על ידי לחיצה על כפתור ההעלאה יתחיל את תהליך ההורדה או כל מה שהכי מתאים לאתר שלך.

כפתור קבל

קבל כפתור

לחץ עליו וטופס יתקבל או כל פעולה אחרת שדורש אישור ממשתמש באתר שלנו.

החלק כפתור

לסחוב

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

ביטול נעילת המחווה

ביטול נעילת המחווה

Un תנועת צד עם אצבע או מצביע ונפתח את הטרמינל עצמו. כפתור אידיאלי נוסף לנייד.


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

2 תגובות, השאר את שלך

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם.

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.

  1.   נלסון דיג'ו

    תרומה נהדרת חבר, תודה

  2.   בניטו קרלוס דיג'ו

    הדף שלך קצת כבד, אם אתה יודע הרבה על תכנות ועל הדברים האלה כדאי לך לייעל את זה ולא להשתמש ב- Wordpress XC