ابدأ التعلم

أزرار بسيطة

يمكنك نسخ الكود بحرية أو استخدام خدمتنا المجانية البرمجة المباشرة لتعديل الكود وفقًا لاحتياجاتك الخاصة.


أزرار بسيطة بمعاني الألوان

<button class="button primary">Primary Button</button>
  <button class="button secondary">Secondary Button</button>
  <button class="button success">Success Button</button>
  <button class="button danger">Danger Button</button>
  <button class="button warning">Warning Button</button>

.button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      margin: 5px;
    }

    /* Primary Button */
    .primary {
      background-color: #3498db;
      color: #fff;
    }

    /* Secondary Button */
    .secondary {
      background-color: #ecf0f1;
      color: #333;
      border: 1px solid #bdc3c7;
    }

    /* Success Button */
    .success {
      background-color: #2ecc71;
      color: #fff;
    }

    /* Danger Button */
    .danger {
      background-color: #e74c3c;
      color: #fff;
    }

    /* Warning Button */
    .warning {
      background-color: #f39c12;
      color: #fff;
    }

معاينة