Advanced Button Gallery

Beautiful and modern buttons for Now.js Framework.

Basic button


          <button class="btn">Default</button>
          <button class="btn btn-primary">Primary</button>
          <button class="btn btn-secondary">Secondary</button>
          <button class="btn btn-success">Success</button>
          <button class="btn btn-warning">Warning</button>
          <button class="btn btn-danger">Danger</button>
          <button class="btn btn-info">Info</button>

Text Buttons


          <button class="btn text">Default Text</button>
          <button class="btn text btn-primary">Text Primary</button>
          <button class="btn text btn-success">Text Success</button>
          <button class="btn text btn-danger">Text Danger</button>

ปุ่มแบบมีกรอบ (Outlined Buttons)


          <button class="btn outline">Default Outline</button>
          <button class="btn outline btn-primary">Primary Outline</button>
          <button class="btn outline btn-success">Success Outline</button>
          <button class="btn outline btn-danger">Danger Outline</button>

ปุ่มแบบกลม (Rounded & Circle)


          <button class="btn btn-primary rounded">Rounded Button</button>
          <button class="btn btn-success pill">Pill Button</button>
          <button class="btn circle btn-primary icon-heart"></button>
          <button class="btn circle btn-danger icon-delete"></button>
          <button class="btn circle btn-info icon-info"></button>

ขนาดต่างๆ (Size Variants)


          <button class="btn btn-primary small">Small</button>
          <button class="btn btn-primary">Normal</button>
          <button class="btn btn-primary large">Large</button>

ปุ่มกลุ่ม (Button Groups)


<div class="btn-group">
  <input type="radio" id="group1-left" name="group1" value="left" checked>
  <label for="group1-left" class="btn">Left</label>
  <input type="radio" id="group1-center" name="group1" value="center">
  <label for="group1-center" class="btn">Center</label>
  <input type="radio" id="group1-right" name="group1" value="right">
  <label for="group1-right" class="btn">Right</label>
</div>

<div class="btn-group">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-danger">Danger</button>
</div>

<div class="btn-group vertical">
  <input type="radio" id="group2-top" name="group2" value="top" checked>
  <label for="group2-top" class="btn">Top</label>
  <input type="radio" id="group2-middle" name="group2" value="middle">
  <label for="group2-middle" class="btn">Middle</label>
  <input type="radio" id="group2-bottom" name="group2" value="bottom">
  <label for="group2-bottom" class="btn">Bottom</label>
</div>

ปุ่มแบบ Dropdown


<button class="btn btn-primary dropdown icon-print">Print
  <ul>
    <li><a href="#" class="icon-edit">แก้ไข</a></li>
    <li><a href="#" class="icon-copy">คัดลอก</a></li>
    <li>
      <hr class="divider">
    </li>
    <li><a href="#" class="color-red icon-delete">ลบ</a></li>
  </ul>
</button>

<div class="btn-group">
  <button class="btn btn-success icon-edit">Edit</button>
  <button class="btn btn-primary dropdown icon-print">Print
    <ul>
      <li><a href="#" class="icon-edit">แก้ไข</a></li>
      <li><a href="#" class="icon-copy">คัดลอก</a></li>
      <li>
        <hr class="divider">
      </li>
      <li><a href="#" class="color-red icon-delete">ลบ</a></li>
    </ul>
  </button>
  <button class="btn btn-info icon-info">Info</button>
</div>

ปุ่มไอคอน (Icon Buttons)


          <button class="btn btn-primary icon-download">ดาวน์โหลด</button>
          <button class="btn btn-success icon-save">บันทึก</button>
          <button class="btn btn-warning icon-warning">เตือน</button>
          <button class="btn btn-danger icon-invalid">ยกเลิก</button>

สถานะต่างๆ (Loading & Disabled)


          <button class="btn btn-primary loading">กำลังโหลด...</button>
          <button class="btn btn-success loading">บันทึกข้อมูล</button>
          <button class="btn btn-secondary" disabled>ปิดใช้งาน</button>

ปุ่มสลับ (Toggle Buttons)


<div class="btn-toggle">
  <input type="checkbox" id="toggle1" class="toggle-input">
  <label for="toggle1" class="btn">
    <span class="toggle-off">ปิด</span>
    <span class="toggle-on">เปิด</span>
  </label>
</div>

<div class="btn-toggle">
  <input type="checkbox" id="toggle2" class="toggle-input">
  <label for="toggle2" class="btn btn-success">
    <span class="toggle-off icon-published0">ซ่อน</span>
    <span class="toggle-on icon-published1">แสดง</span>
  </label>
</div>

ปุ่มไล่สี (Gradient Buttons)


          <button class="btn btn-gradient btn-gradient-blue">Blue Gradient</button>
          <button class="btn btn-gradient btn-gradient-purple">Purple Gradient</button>
          <button class="btn btn-gradient btn-gradient-pink">Pink Gradient</button>
          <button class="btn btn-gradient btn-gradient-orange">Orange Gradient</button>
          <button class="btn btn-gradient btn-gradient-green">Green Gradient</button>

ปุ่มโซเชียลมีเดีย


          <button class="btn btn-facebook icon-facebook">Facebook</button>
          <button class="btn btn-twitter icon-twitter">Twitter</button>
          <button class="btn btn-line icon-line">Line</button>
          <button class="btn btn-instagram icon-instagram">Instagram</button>
          <button class="btn btn-youtube icon-youtube">YouTube</button>

ปุ่มลอย (Floating Action Buttons)

ปุ่มลอยจะแสดงที่มุมล่างขวาของหน้าจอ

          <button class="btn float btn-primary circle icon-new"></button>