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

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

בואו נתחיל!

כיצד לשנות את צבע הכפתור ברחף ב-CSS?

ב-CSS, ' :לְרַחֵף ' משמש לשינוי צבע הכפתור בעת ריחוף. ' :לְרַחֵף ” הוא מחלקה פסאודו המאפשרת לשנות את ההתנהגות של רכיבי HTML כאשר העכבר מעליו, כגון אלמנטים כמו קישורים, כפתורים, תמונות ועוד רבים.

התחביר של :לְרַחֵף מסופק להלן.

תחביר

בתחביר שצוין לעיל, ' א ' מתייחס לרכיב ה-HTML שבו ' :לְרַחֵף ' מיושם. ב-CSS, אתה יכול להגדיר את התנהגות הריחוף של רכיבי HTML, כגון צבע, גודל ורוחב של האלמנט.

שלב 1: צור Div וכפתור

ב-HTML, ראשית, ניצור div ונוסיף כותרת עם

וכפתור באמצעות תג. כאן, נקצה את שם הכיתה של הכפתור כ' btn ' והלחצן טקסט בתור ' רחף עליי '.

HTML

התוצאה של הקוד הנ'ל ניתנת להלן. אתה יכול לראות שהכותרת והלחצן נוצרו:

כעת, עבור ל-CSS כדי לסגנן את ה-div ואת הכפתור אחד אחד.

שלב 2: כפתור סגנון ו-div

ראשית, נעצב את המיכל שנוצר באמצעות ' div '. לאחר מכן, נגדיר את גובה ה-div כ' 250 פיקסלים ' וצבע הרקע כ' rgb(199, 173, 192) '. נשתמש גם במאפיין הגבול כדי להתאים את הגבול של ה-div, רוחב כ' 5 פיקסלים ', סגנון כ' מוצק ', וצבע כ' rgb(40, 2, 55) '.

CSS

הפלט הנתון להלן מציין שהסגנון שנוסף מיושם בהצלחה על ה-div:

בשלב הבא, נסגננו את הכפתור באמצעות CSS.

כעת, נעצב את הכפתור באמצעות ' .btn ' כדי לגשת לכפתור שנוצר ב-HTML. לאחר מכן, נסתיר את גבול הכפתור על ידי הגדרת ' אף אחד ' כערך נכס הגבול. לאחר מכן, נתאים את גודל הגופן ל' גָדוֹל ' והריפוד של הכפתור ל' 10 פיקסלים ' כדי ליצור רווחים בין תוכן הכפתור לגבול הכפתור. בסופו של דבר, נגדיר את צבע הטקסט והרקע כ' rgb(50, 0, 54) ' ו' rgb(193, 54, 135) ”:

הכפתור מעוצב כעת:

בהמשך, נחיל ' :לְרַחֵף ' כדי לשנות את הצבע של כפתור בעת ריחוף.

שלב 3: שנה את צבע הכפתור ברחף

כעת, נשתמש ב' .btn:hover ' כדי לקשר את הכפתור עם הרכיב פסאודו-קלאס רחף. כתוצאה מכך, ריחוף יחול על הכפתור. לאחר מכן, נגדיר את צבע הרקע וצבע הטקסט של הכפתור כ' rgb(66, 2, 41) ' ו' rgb(119, 255, 0) '. הצבעים האלה יוחלו על הכפתור כאשר העכבר יעבור עליו:

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

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

סיכום

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