עצב כפתור ויזואלית וקבל את ה-HTML וה-CSS כדי להשתמש בו באתר שלך. התחל עם הגדרה מראש, כוונן טיפוגרפיה, צבעים, צורה וצללים, ולאחר מכן הצג בתצוגה מקדימה את מצבי האינטראקציה לפני הייצוא.
עיין בהגדרות המוקדמות של 44 מתוך אוספי Everyday, Classic, Shaped, Expressive, Gradients ו-Elite. כל הגדרה מראש היא נקודת התחלה שניתן לערוך.
כיצד הגדרות מוקדמות משפיעות על העיצוב שלך
בחר תחילה, ולאחר מכן כוונן
השתמש באוסף הסגנונות כדי לצמצם את הגלריה. החלת הגדרה מראש מחליפה גם את סגנונות ברירת המחדל וגם את סגנונות הריחוף, תוך שמירה על טקסט הכפתור ושם המחלקה שלך.
נסה מילוי אחיד פשוט, פינה מעוצבת, קווי מתאר חדים או טיפול דקורטיבי יותר. ברגע שתמצא כיוון, השתמש בלשוניות האחרות כדי להתאים את הפרטים לדף שלך.
גרום לתווית להרגיש נכון
הגדר את טקסט הכפתור, משפחת הגופנים, הגודל, המשקל, המרווחים, גובה השורה, היישור וצבע הטקסט. ראה את התווית מתעדכנת בזמן שאתה עובד.
כוונן טקסט ומרווחים
טיפוגרפיה שמתאימה לפעולה
הטקסט מכיל את פקדי הגופן ושדה טקסט כפתור שני. גודל הגופן נע בין 10 ל-80 פיקסלים; המשפחות המפורטות משתמשות בגופנים הזמינים במכשיר של המבקר.
השתמש בתווית קצרה שמתארת את הפעולה. במילוי, ריפוד אופקי ואנכי מוסיף מרווח סביבו מבלי לשנות את גודל הגופן. בדוק תוויות ארוכות יותר בדף שבו ישמש הכפתור.
בחר מילוי אחיד או הדרגתי
השתמש בצבע רקע אחד או ערבב שני צבעים עם הדרגתיות ליניארית. בוררי צבעים וקלט הקסדצימלי מאפשרים לך לעבוד ויזואלית או במדויק.
הגדר צבעים וכיוון הדרגתיות
שני צבעים, כיוון אחד ברור
במילוי, שנה את סגנון המילוי להדרגתיות ליניארית כדי לחשוף את הצבע השני וזווית ההדרגתיות. הזווית נעה בין 0 ל-360 מעלות.
שדות הקסדצימליים מקבלים צבע מלא בן שש ספרות או קיצור בן שלוש ספרות. בדוק את התווית הלבנה או הצבעונית מול שני הקצוות של הדרגתיות; הסטודיו אינו מאשר אוטומטית את ניגודיות הטקסט.
שלוט בקווי המתאר ובעומק
כוונן פינות מקושרות או עצמאיות, רוחב וסגנון גבול, צלליות תיבה וצלליות טקסט. תן לכפתור צורה שמתאימה להקשר שלו.
חקור פינות, גבולות וצללים
ממלבן חד ועד גלולה רכה
בצורה, השאר את 'קשר את כל הפינות' פעיל עבור רדיוס משותף אחד, או כבה אותו כדי להגדיר כל פינה. סגנונות גבול כוללים אחיד, מקווקו, מנוקד, כפול, שקוע, בולט, רכס, חריץ וללא.
בצל, הגדר היסטים אופקיים ואנכיים, טשטוש, צבע ואטימות. לצל תיבה יש גם מרווח ומתג שקוע. צל טקסט הוא נפרד, כך שתוכל להוסיף עומק לתווית מבלי לשנות את קווי המתאר של הכפתור.
עצב גם את האינטראקציה
ערוך את סגנונות ברירת המחדל והריחוף בנפרד. הצג בתצוגה מקדימה את המראה של ברירת מחדל, ריחוף ופעיל, ולאחר מכן השווה את הכפתור על קנבסים בהירים וכהים.
הבן מצבי עריכה ותצוגה מקדימה
שני סגנונות הניתנים לעריכה, שלושה מצבי תצוגה מקדימה
מצב העריכה בוחר איזה סגנון הפקדים שלך משנים. כפתורי מצב הקנבס בוחרים רק את התצוגה המקדימה. ריחוף או לחיצה על התצוגה המקדימה מציגים גם את האינטראקציה שלה.
ערכי ריחוף שעדיין תואמים לברירת המחדל עוקבים אחר עריכות בסיס עד להתאמה אישית. ה-CSS המיוצא כולל כלל ריחוף בעת הצורך, קווי מתאר גלויים במיקוד, תנועה פעילה וכלל תנועה מופחתת.
הבא את ה-CSS לפרויקט שלך
העתק את ה-CSS שנוצר ואת כפתור ה-HTML התואם, או הורד גיליון סגנונות. שם מחלקה שומר על שני החלקים מחוברים.
העתק, הורד ושמור על עבודתך
קוד פשוט שניתן להשתמש בו ישירות
בחר שם מחלקה ייחודי, העתק את CSS מהלשונית שלו, ולאחר מכן העתק את הכפתור מ-HTML. הורדה שומרת קובץ .css שנקרא על שם המחלקה; היא לא מורידה דף אינטרנט שלם.
תצוגה מקדימה ויצירת קוד פועלים בדפדפן שלך. הסטודיו מנסה לזכור טיוטה אחת באחסון המקומי של דפדפן זה; ייצא כל מה שאתה רוצה לשמור. איפוס מחזיר את הסטודיו לסגנון ההתחלה שלו.
טקסט וסגנונות בפנים. HTML ו-CSS בחוץ.
אין צורך בהעלאה. JavaScript מפעיל את העורך החי בדפדפן שלך. העתק את ה-HTML וה-CSS בנפרד, או הורד את גיליון הסגנונות CSS. מחסנית הגופנים שנוצרה משתמשת בגופנים הזמינים במכשיר של הצופה.
