עיצוב כפתורים וטפסים

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

למידע נוסף על CSS, עיין במדריך CSS .

עיצוב כפתורים

ניתן לעצב כפתורים בעזרת CSS כדי לשנות את צבעם, צורתם, וגודלם.

        <style>
          .btn {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
          }
          .btn:hover {
            background-color: #45a049;
          }
        </style>
    
        <a href="#" class="btn">כפתור</a>
        

כאן השתמשנו בכיתה .btn כדי לעצב את הכפתור ולשנות את צבע הרקע, את צבע הטקסט, ואת צורת הכפתור.

עיצוב טפסים

טפסים יכולים להיראות טוב יותר בעזרת CSS על ידי שינוי הרקע, גבולות, ורווחים.

        <style>
          .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
          }
          .form-group {
            margin-bottom: 15px;
          }
          .submit-btn {
            background-color: #008CBA;
            color: white;
            border: none;
            padding: 14px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
          }
          .submit-btn:hover {
            background-color: #007bb5;
          }
        </style>
    
        <form>
          <div class="form-group">
            <label for="name">שם:</label>
            <input type="text" id="name" class="form-control">
          </div>
          <div class="form-group">
            <label for="email">אימייל:</label>
            <input type="email" id="email" class="form-control">
          </div>
          <button type="submit" class="submit-btn">שלח</button>
        </form>
        

השתמשנו בכיתות .form-control ו-.submit-btn כדי לעצב את השדות והכפתור בטופס.