כפתור
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 53 מתוך 76.
אתגר
קלבשיעור הזה נעצב את כפתור השליחה כדי שיהיה מושך מבחינה חזותית. תחילו צבע רקע, תשנו את צבע הטקסט ואת המרווח הפנימי, תעגלו את הפינות ותוסיפו צל לקופסה של הטופס כדי להבליט אותו.
עצבו את הרכיב <button>. פעלו לפי השלבים הבאים:
- הגדירו את width ל-100% כדי שימלא את כל השטח.
- החילו background-color לבחירתכם.
- שנו את צבע הטקסט והבליטו את הגופן.
- הוסיפו padding לשיפור המרווחים.
- עגלו את הפינות.
- החילו את המאפיין box-shadow על הכפתור כדי להבליט אותו על הרקע.
נסו בעצמכם
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין