דוגמה זו משתמשת רק בפקדים של המחולל. התמונות למעלה מציגות גיליונות סגנונות שהורדו בפועל והוחלו על כפתורי HTML רגילים, לא צילומי מסך של העורך.
התחל עם Signature
פתח את מחולל כפתורי ה-CSS. תחת Presets, בחר Signature מאוסף Everyday. הגדר את טקסט הכפתור ל-“Get started”. באזור הקוד, הגדר את שם המחלקה (Class name) ל-cta-button.
הגדרה מראש מחליפה את סגנונות ברירת המחדל והריחוף, בעוד שהתווית ושם המחלקה שלך נשארים. בחר את נקודת ההתחלה שלך לפני ביצוע התאמות מפורטות.
שם המחלקה מחבר את חוקי ה-CSS לכפתור ה-HTML שלך. המחולל מנקה תווים לא נתמכים; השתמש בשם קצר ומובחן כדי להימנע מעיצוב אלמנטים לא קשורים.
צור את הכפתור המעוגל
השאר את מצב העריכה (Editing state) על Default. תחת Text, בחר System sans, גודל גופן 18 פיקסלים, ומשקל Bold. שמור על צבע טקסט לבן, סגנון רגיל, יישור למרכז וגובה שורה 1.4.
תחת Fill, בחר Linear gradient. השתמש בשני הצבעים ובזווית למטה. הגדר ריווח אופקי ל-32 פיקסלים וריווח אנכי ל-16 פיקסלים. תחת Shape, השאר את Link all corners מופעל והגדר את רדיוס הפינה ל-100 פיקסלים. רוחב הגבול נשאר 0 פיקסלים.
תחת Shadow, השאר את Box shadow מופעל. השתמש בהיסט אופקי 0 פיקסלים, היסט אנכי 8 פיקסלים, טשטוש 24 פיקסלים, פריסה −4 פיקסלים, צבע #460BD8, ושקיפות 32%. השאר את Inset shadow ו-Text shadow כבויים.
ריווח משנה את המרווח סביב הטקסט. רדיוס פינה משנה את קווי המתאר. רדיוס גדול יוצר צורה מעוגלת זו מבלי להרחיב את התווית.
תן לריחוף טיפול משלו
העבר את מצב העריכה ל-Hover. תחת Fill, שנה את צבע הרקע ל-#33099E ואת הצבע השני ל-#6D20BF. שמור על זווית מעבר הצבע ב-135°. תחת Shadow, שנה את ההיסט האנכי ל-10 פיקסלים ואת הטשטוש ל-28 פיקסלים. השאר את שאר ההגדרות ללא שינוי.
השתמש בכפתורי ה-Default, Hover ו-Active על הקנבס כדי לבדוק כל מצב. ניתן גם לרחף מעל או ללחוץ על כפתור התצוגה המקדימה. שנה את הקנבס בין בהיר לכהה כדי לבחון את הקצה והצל שלו.
מצב העריכה בוחר אילו סגנונות אתה משנה. מצב הקנבס משנה רק את מה שאתה רואה בתצוגה מקדימה. חזור לעריכת Default לפני התאמת המראה במצב מנוחה.
מאפייני ריחוף שעדיין תואמים לברירת המחדל עוקבים אחר עריכות ברירת מחדל מאוחרות יותר. ברגע שאתה מתאים אישית מאפיין ריחוף, הוא נשאר עצמאי. בדוק שוב את שני המצבים לאחר שינוי סגנון הבסיס.
ייצא ובדוק בדף שלך
בחר את כרטיסיית ה-CSS והשתמש ב-Copy CSS, או בחר Download כדי לשמור את cta-button.css. בחר את כרטיסיית ה-HTML והעתק את סימון הכפתור התואם. ה-HTML כולל את אותו שם מחלקה וכפתור עם type="button".
הוסף את ה-CSS לגיליון הסגנונות שלך, או קשר את הקובץ שהורדת מהדף שלך. מקם את ה-HTML במקום שבו הכפתור שייך. שני הייצואים עובדים יחד: כפתור HTML לבדו אינו כולל את העיצוב שלו.
פתח את הדף ובדוק את מצבי ברירת המחדל, הריחוף, המיקוד במקלדת והלחיצה שלו. הייצוא כולל קו מתאר למיקוד גלוי, תנועה פעילה קטנה וחוק להפחתת תנועה. הסגנונות שמסביב והגופנים המותקנים שלך עדיין יכולים להשפיע על התוצאה.
הכפתור שנוצר הוא פקד מעוצב. חבר את התנהגות הלחיצה שלו בפרויקט שלך; השתמש בסוג הכפתור הנכון בעת הוספתו לטופס.
cta-button.css
שם הקובץ שהורד עוקב אחר שם המחלקה.
שאלות נפוצות
האם אני צריך מסגרת CSS?
לא. הפלט הוא CSS סטנדרטי בתוספת כפתור HTML פשוט. הדבק את ה-CSS לגיליון הסגנונות שלך והשתמש במחלקה התואמת על הכפתור.
האם הורדה שומרת גם את ה-HTML?
הורדה שומרת קובץ .css שנקרא על שם המחלקה. העתק את סימון הכפתור בנפרד מכרטיסיית ה-HTML.
האם אני יכול לתת לכל פינה רדיוס שונה?
כן. תחת Shape, כבה את Link all corners, ולאחר מכן הגדר את Top left, Top right, Bottom right ו-Bottom left באופן עצמאי. דוגמה זו שומרת עליהם מקושרים עבור צורת כדור.
האם העיצוב שלי עדיין יהיה כאן בפעם הבאה?
הסטודיו מנסה לשמור את הטיוטה הנוכחית באחסון המקומי של דפדפן זה. זהו אינו חשבון או גיבוי בין מכשירים. הגדרות דפדפן, מחיקת נתוני אתר או איפוס עלולים להסיר או להחליף אותה, לכן ייצאו עבודה שברצונכם לשמור.
האם הכפתור שלי מועלה לשרת?
תצוגה מקדימה של העיצוב ויצירת CSS/HTML מתבצעות בדפדפן שלכם. העורך אינו מעלה את טקסט הכפתור או את טיוטת העיצוב שלכם כדי ליצור את הייצוא.
תנו לכפתור הבא שלכם סגנון משלו.
בחרו נקודת התחלה, כווננו את הפרטים והביאו את הקוד לפרויקט שלכם.