CSS3 יצירת לחצן מלוטש / כיבוי
באמצעות כפתור הוא, עד כה, הדרך המועדפת על אינטראקציה עם דברים אלקטרוניים; כגון רדיו, טלוויזיה, נגן מוסיקה, ואפילו טלפון חכם בעל תכונה פקודה קולית עדיין צריך לפחות אחד או שניים כפתורים פיזיים.
יתר על כן, בעידן הדיגיטלי הזה, כפתור התפתח בצורתו הדיגיטלית, כמו גם, מה שהופך אותו יותר אינטראקטיבי, דינמי וקל אמיתי לעשות, לעומת כפתור פיזי.
אז, הפעם, אנחנו הולכים ליצור כפתור חלקלק ואינטראקטיבי המבוסס על עיצוב מעולה זה ב Dribbble באמצעות CSS בלבד.
ובכן, בואו רק להתחיל.
HTML
נתחיל את הלחצן על ידי הצבת הסימון הבא במסמך HTML. זה פשוט מאוד, הכפתור יהיה מבוסס על תג עוגן, יש לנו גם span ליד זה כדי ליצור את הנורית מחוון, ולאחר מכן הם עטופים יחד בתוך HTML5 סעיף תג.
& # xF011;
הנה איך את הכפתור הראשון נראה.
סגנון בסיסי
בסעיף זה, נתחיל לעבוד על סגנונות.
תחילה אנו מיישמים את הרקע הכהה הזה מדפוס עדין על המסמך של הגוף ומרכז את סעיף. לאחר מכן, אנו גם להסיר את מנוקד מתווה על ה : המוקד ו : פעילים קישור.
body background: url ('images / micro_carbon.png'); קטע margin: 150px auto 0; רוחב: 75px; גובה: 95px; מקומות קרובים text-align: center; : active,: focus outline: 0; שימוש בגופן מותאם אישית
עבור הסמל של הלחצן, אנו נשתמש בגופן מותאם אישית מ- Font Awesome במקום בתמונה. בדרך זו הסמל יהיה בקלות בסגנון, מסוגל בקנה מידה מסוגל דרך גיליון סגנונות.
הורד את הגופן, לאחסן את קבצי הגופן (eot, woff, ttf ו svg) ב גופנים ולאחר מכן הצב את הקוד הבא בגיליון הסגנונות שלך כדי להגדיר משפחת גופנים חדשה.
@ font-face font-family: "FontAwesome"; src: url ("גופנים / fontawesome-webfont.eot"); ("גופנים / fontawesome-webfont.woff") פורמט ('woff'), כתובת אתר ("גופנים / fontawesome- webfont.ttf ") פורמט ('trutype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") פורמט ('svg'); משקל גופני: רגיל; font-style: Normal; 
ה סמל כוח כי אנחנו צריכים עבור כפתור זה מיוצג במספר Unicode F011; אם אתה מסתכל מקרוב על סימון HTML לעיל, שמנו את זה דמות מספריים & # xF011; בתוך תג העוגן, אך מכיוון שלא הגדרנו את המנהג משפחת גופן בסמל הלחצן, הסמל עדיין לא מוצג כראוי.
לקריאה נוספת: Unicode ו- HTML: דמויות מסמך
סטיילינג את הכפתור
קודם כל, אנחנו צריכים להגדיר את המנהג משפחת גופן עבור הלחצן.
הכפתור שלנו יהיה מעגל, נוכל להשיג את אפקט המעגל באמצעות רדיוס הגבול רכוש ולהגדיר את הערך, לפחות, חצי כפתור רוחב.
מאז, אנו משתמשים בגופן עבור הסמל, אנחנו יכולים בקלות להגדיר את צבע ותוסיף צל טקסט עבור הסמל בגיליון הסגנונות.
הבא, אנחנו גם ליצור אפקט משופעים על הכפתור. אפקט זה הוא מסובך למדי. ראשית, אנחנו צריכים להגיש בקשה צבע רקע: rgb (83,87,93); עבור בסיס הצבע של הכפתור, אז אנחנו מוסיפים עד ארבע שכבות של צלליות.
font-family: "FontAwesome"; צבע: rgb (37,37,37); text-shadow: 0px 1px 1px rgba (250,250,250,0.1); font-size: 32pt; בלוק תצוגה; מקומות קרובים text-decoration: none; צבע רקע: rgb (83,87,93); : 0xx 0xx 0xx (0,3x) 0xx 0px 0px rgb (34,34,34), / * 1 Shadow * / 0px 7px 10px 0px rgb (17,17,17), / * 1 Shadow / inset 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3 צל * / Inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4 צל * / רוחב: 70px; גובה: 70px; border you01; border-radius: 35px; text-align: center; line-height: 79px;
יש גם מעגל גדול בחלק החיצוני של הכפתור ואנחנו נשתמש :לפני אלמנט פסאודו עבור זה במקום להוסיף סימון נוסף.
a: לפני content: ""; רוחב: 80px; גובה: 80px; בלוק תצוגה; z-index: -2; תפקיד מוחלט צבע רקע: rgb (26,27,29); משמאל: -5px; top: -2px; border-radius: 40px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), משובצים 0px 1px 2px rgba (0, 0, 0, 0.5);
לקריאה נוספת: CSS: לפני ואחרי אלמנטים פסאודו (Hongkiat.com)
נורית החיווי
מתחת ללחצן, יש אור זעיר כדי להגדיר את מצב הפעלה וכיבוי. להלן, אנו מיישמים אדום צבע של האור, כי הכוח הוא בתחילה כבוי, אנחנו גם להוסיף צל קופסא כדי לחקות את האפקט המנצנץ של האור.
a span/ Display: block; רוחב: 8px; גובה: 8px; צבע רקע: rgb (226,0,0); box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0.5); border-radius: 4px; תנקה את שניהם; תפקיד מוחלט bottom: 0; משמאל: 42%;
האפקט
בשלב זה הכפתור שלנו מתחיל להיראות טוב ואנחנו רק צריכים להוסיף כמה אפקטים על זה, למשל, כאשר כפתור 'להיות' נלחץ על, אנחנו רוצים את הכפתור נראה כאילו זה להיות לחוץ והחזיק למטה.
כדי להשיג את האפקט, הראשון צל קופסא הכפתור ייסגר והמיקום יוריד מעט. אנחנו גם צריכים להתאים את שלוש הצללים האחרים "מעט כדי להתאים את המיקום כפתור.
a: פעילה: box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1 Shadow * / 0px 3px 7px 0px rgb (17,17,17), / * 2 Shadow * / inset 0px 1px 1px (0, 0, 0, 0.5); / * 4 צל * / רקע צבע: rgb (83,87,93); top: 3px;
יתר על כן, לאחר לחיצה על הכפתור, הוא צריך להישאר לחוץ למטה ואת הסמל צריך 'לזרוח' כדי לציין את הכוח הוא פועל.
כדי להשיג אפקט כזה נתמקד כפתור באמצעות : יעד פסאודו, ולאחר מכן לשנות את צבע הסמל לבן ולהוסיף a צל טקסט עם צבע לבן גם כן.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , Inset 0px -10px 35px 5px rgba (0, 0, 0, .5); צבע רקע: rgb (83,87,93); top: 3px; צבע: #fff; text-shadow: 0px 0px 3px rgb (250,250,250);
לקריאה נוספת: שימוש: יעד פסאודו
אנחנו גם צריכים להתאים את צל קופסא במעגל מחוץ ללחצן, כדלקמן.
a: active: before, a: target: before top: -5px; צבע רקע: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), משובצים 0px 1px 2px rgba (0, 0, 0, 0.5);
מחוון האור ישתנה מברירת המחדל של צבע אדום לירוק כדי להדגיש שהכוח פועל כבר.
a: target + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); צבע רקע: rgb (135,187,83);
אפקט מעבר
לבסוף, כדי להפוך את האפקט של כפתור לפעול בצורה חלקה, אנו גם להחיל את אפקט המעבר הבא.
קטע זה להלן יוסיף באופן ספציפי את המעבר אל צבע רכוש צל טקסט ל 350ms ב אלמנט עוגן.
א מעבר: צבע 350ms, צל-טקסט 350ms; - מעבר: צבע 350ms, צל טקסט 350ms; -מעבר-מעבר: צבע 350ms, צל-טקסט 350ms; -webkit- מעבר: צבע 350ms, צל טקסט 350ms;
קטע הקוד הבא יוסיף את המעבר ל צבע רקע ו צל קופסא רכוש מחוון האור.
a: target + span transfer: צבע רקע בצבע 350ms, box-shadow 700ms; -המעבר: צבע רקע 350 מ ', תיבת צל 700ms; -Moz המעבר: צבע רקע 350ms, box-shadow 700ms; -webkit- מעבר: צבע רקע 350ms, box-shadow 700ms;
תוצאה סופית
באנו דרך כל סגנונות שאנחנו צריכים, עכשיו אתה יכול לראות את התוצאה הסופית לחיות כמו גם להוריד את קובץ המקור מהקישורים להלן.
- הדגמה
- הורד מקור
בונוס: איך לכבות אותו
הנה מגיע הבונוס. אם ניסית את הלחצן מההדגמה שלמעלה, הבחנת שניתן ללחוץ על הכפתור פעם אחת בלבד, כדי להפעיל אותו, אז איך אנחנו מכבים אותו?.
למרבה הצער, אנחנו צריכים לעשות את זה עם jQuery, אבל זה ממש פשוט גם כן. להלן כל קוד jQuery שאנחנו צריכים.
($) ($) ($) ($) (.toggleClass ('on');); קטע הקוד יוסיף את הכיתה ON בעוגן, והשתמשנו ב- toggleClass פונקציה מ jQuery להוסיף אותו. אז, כאשר #button הוא לחץ על, jQuery יבדוק אם בכיתה ON נוספה או לא: כאשר זה לא, את jQuery יוסיף את הכיתה, ואם זה נוסף, את jQuery תסיר את הכיתה.
הערה: אל תשכח לכלול את ספריית jQuery.
עכשיו אנחנו צריכים לשנות את הסגנון קצת. פשוט להחליף את כל : יעד אלמנט פסאודו עם ה .on בורר המעמד, כדלקמן:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , Inset 0px -10px 35px 5px rgba (0, 0, 0, .5); צבע רקע: rgb (83,87,93); top: 3px; צבע: #fff; text-shadow: 0px 0px 3px rgb (250,250,250); a: פעיל: לפני, a.on: לפני top: -5px; צבע רקע: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), משובצים 0px 1px 2px rgba (0, 0, 0, 0.5); a_on + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); צבע רקע: rgb (135,187,83);
לבסוף, בוא ננסה את זה בדפדפן.
- הדגמה
- הורד מקור
