כפתור הוא רכיב הניתן ללחיצה המשמש לביצוע פעולה מסוימת. באמצעות CSS, אתה יכול להגדיר סגנונות שונים של כפתורים אחד מהם הוא לשנות את הצבע של כפתור בלחיצה. ניתן להגדיר את הצבע של כפתור באמצעות ה-CSS ' :פָּעִיל 'פסאודו-קלאס.
בלוג זה ילמד אותך את ההליך הקשור לשינוי צבע הכפתור בלחיצה. לשם כך, ראשית, למד על ה-:active pseudo-class.
אז, בואו נתחיל!
מה זה ':active' ב-CSS?
שינוי צבע הכפתור בלחיצה ב-CSS אפשרי בעזרת ה-' :פָּעִיל 'פסאודו-קלאס. ב-HTML, זה מציין אלמנט שמופעל כאשר המשתמש לוחץ עליו. יתרה מכך, בעת שימוש בעכבר, ההפעלה מתחילה בלחיצה על מקש העכבר.
תחביר
א : פָּעִיל {
צֶבַע : ירוק ;
}
' א ' מתייחס לרכיב ה-HTML עליו תופעל המחלקה :active.
בואו נלך לעבר דוגמה כדי להבין את המושג המוצהר.
כיצד לשנות את צבע הכפתור בלחיצה ב-CSS?
כדי לשנות את הצבע של כפתור בלחיצה, ראשית, צור כפתור בקובץ HTML והקצה את שם הכיתה ' btn '.
HTML
< גוּף >< לַחְצָן מעמד = 'btn' > לַחְצָן < / לַחְצָן >
< / גוּף >
לאחר מכן, ב-CSS, הגדר את צבע הכפתור. לשם כך, נשתמש ב' .btn ' כדי לגשת ללחצן ולהגדיר את צבע הכפתור כ' rgb(0, 255, 213) '.
CSS
.btn {צבע רקע : rgb ( 0 , 255 , 213 ) ;
}
לאחר מכן, החל את :active pseudo-class על הכפתור כ' .btn:active ' והגדר את צבע הכפתור שיופיע במצבו הפעיל כ' rgb(123, 180, 17) ”:
.btn : פָּעִיל {צבע רקע : rgb ( 123 , 180 , 17 ) ;
}
זה יראה את התוצאה הבאה:
כעת, הבה נוסיף את הכותרת עם תג
ושם הכיתה ' לַחְצָן ', בתוך התג .
HTML
< מֶרְכָּז >
< h1 > שנה את צבע הכפתור < / h1 >
< לַחְצָן מעמד = 'לַחְצָן' > לחץ עלי < / לַחְצָן >
< / מֶרְכָּז >
לאחר מכן, נעבור ל-CSS ונעצב את הכפתור ונחיל עליו :active. לשם כך, נגדיר את סגנון הגבול כ' אף אחד ' ותן ריפוד כ' 15 פיקסלים '. לאחר מכן, הגדר את צבע הטקסט של הכפתור כ' rgb(50, 0, 54) ' והרקע שלו כ' rgb(177, 110, 149) ', והרדיוס שלו כ' 15 פיקסלים ”:
.לַחְצָן {
גבול : אף אחד ;
ריפוד : 15 פיקסלים ;
צֶבַע : rgb ( חמישים , 0 , 54 ) ;
צבע רקע : rgb ( 177 , 110 , 149 ) ;
רדיוס הגבול : 15 פיקסלים ;
}
זה יראה את התוצאה הבאה:
לאחר מכן, נחיל את :active pseudo-class על הכפתור כ' .button:active ' והגדר את צבע הכפתור כ' rgb(200, 255, 0) ”:
.לַחְצָן : פָּעִיל {
צבע רקע : rgb ( 200 , 255 , 0 ) ;
}
לאחר שתטמיע את כל הקוד לעיל, עבור אל קובץ ה-HTML והפעל אותו כדי לבדוק את התוצאה:
מהפלט, ניתן לראות כאשר לוחצים על הכפתור צבעו משתנה בהתאם לקוד הצבע RGB שצוין.
סיכום
כדי לשנות את צבע הכפתור בלחיצה ב-CSS, ' :פָּעִיל ניתן להשתמש בפסאודו-קלאס. ליתר דיוק, הוא יכול לייצג את אלמנט הכפתור כאשר הוא מופעל. באמצעות מחלקה זו, ניתן להגדיר צבעי כפתור שונים כאשר העכבר לוחץ עליו. מאמר זה הסביר את ההליך לשינוי צבע הכפתור בלחיצה ב-CSS.
HTML
< מֶרְכָּז >< h1 > שנה את צבע הכפתור < / h1 >
< לַחְצָן מעמד = 'לַחְצָן' > לחץ עלי < / לַחְצָן >
< / מֶרְכָּז >
לאחר מכן, נעבור ל-CSS ונעצב את הכפתור ונחיל עליו :active. לשם כך, נגדיר את סגנון הגבול כ' אף אחד ' ותן ריפוד כ' 15 פיקסלים '. לאחר מכן, הגדר את צבע הטקסט של הכפתור כ' rgb(50, 0, 54) ' והרקע שלו כ' rgb(177, 110, 149) ', והרדיוס שלו כ' 15 פיקסלים ”:
.לַחְצָן {גבול : אף אחד ;
ריפוד : 15 פיקסלים ;
צֶבַע : rgb ( חמישים , 0 , 54 ) ;
צבע רקע : rgb ( 177 , 110 , 149 ) ;
רדיוס הגבול : 15 פיקסלים ;
}
זה יראה את התוצאה הבאה:
לאחר מכן, נחיל את :active pseudo-class על הכפתור כ' .button:active ' והגדר את צבע הכפתור כ' rgb(200, 255, 0) ”:
.לַחְצָן : פָּעִיל {צבע רקע : rgb ( 200 , 255 , 0 ) ;
}
לאחר שתטמיע את כל הקוד לעיל, עבור אל קובץ ה-HTML והפעל אותו כדי לבדוק את התוצאה:
מהפלט, ניתן לראות כאשר לוחצים על הכפתור צבעו משתנה בהתאם לקוד הצבע RGB שצוין.
סיכום
כדי לשנות את צבע הכפתור בלחיצה ב-CSS, ' :פָּעִיל ניתן להשתמש בפסאודו-קלאס. ליתר דיוק, הוא יכול לייצג את אלמנט הכפתור כאשר הוא מופעל. באמצעות מחלקה זו, ניתן להגדיר צבעי כפתור שונים כאשר העכבר לוחץ עליו. מאמר זה הסביר את ההליך לשינוי צבע הכפתור בלחיצה ב-CSS.