<h1>Button</h1>
<h2>没有主题 defualt</h2>
<p>
  <button class="nu_btn">Button</button>
  <button class="nu_btn _fill">Fill</button>
  <button class="nu_btn _ghost">Ghost</button>
  <button class="nu_btn _fill _capsule">Capsule Fill </button>
  <button class="nu_btn _ghost _capsule">Capsule Ghost</button>
</p>
<p>
  <button disabled class="nu_btn">button</button>
  <button disabled class="nu_btn _fill">button</button>
  <button disabled class="nu_btn _ghost">button</button>
  <button disabled class="nu_btn _fill _capsule">Capsule Fill </button>
  <button disabled class="nu_btn _ghost _capsule">Capsule Ghost</button>
</p>
<h2>Bootstrap</h2>
<h3>实心按钮「 fill 」</h3>
<p>
  <button class="nu_btn btn_bootstrap _fill _primary">Primary</button>
  <button class="nu_btn btn_bootstrap _fill _secondary">Secondary</button>
  <button class="nu_btn btn_bootstrap _fill _warning">Warning</button>
  <button class="nu_btn btn_bootstrap _fill _success">Success</button>
  <button class="nu_btn btn_bootstrap _fill _danger">Danger</button>
</p>
<p>
  <button disabled class="nu_btn btn_bootstrap _fill _primary">Primary</button>
  <button disabled class="nu_btn btn_bootstrap _fill _secondary">Secondary</button>
  <button disabled class="nu_btn btn_bootstrap _fill _warning">Warning</button>
  <button disabled class="nu_btn btn_bootstrap _fill _success">Success</button>
  <button disabled class="nu_btn btn_bootstrap _fill _danger">Danger</button>
</p>
<h3>幽灵按钮「 ghost 」</h3>
<p>
  <button class="nu_btn btn_bootstrap _ghost _primary">Primary</button>
  <button class="nu_btn btn_bootstrap _ghost _secondary">Secondary</button>
  <button class="nu_btn btn_bootstrap _ghost _warning">Warning</button>
  <button class="nu_btn btn_bootstrap _ghost _success">Success</button>
  <button class="nu_btn btn_bootstrap _ghost _danger">Danger</button>
</p>
<p>
  <button disabled class="nu_btn btn_bootstrap _ghost _primary">Primary</button>
  <button disabled class="nu_btn btn_bootstrap _ghost _secondary">Secondary</button>
  <button disabled class="nu_btn btn_bootstrap _ghost _warning">Warning</button>
  <button disabled class="nu_btn btn_bootstrap _ghost _success">Success</button>
  <button disabled class="nu_btn btn_bootstrap _ghost _danger">Danger</button>
</p>
<h3>Link 按钮</h3>
<p>
  <button class="nu_btn btn_bootstrap">Default</button>
  <button class="nu_btn btn_bootstrap _primary">Primary</button>
  <button class="nu_btn btn_bootstrap _secondary">Secondary</button>
  <button class="nu_btn btn_bootstrap _warning">Warning</button>
  <button class="nu_btn btn_bootstrap _success">Success</button>
  <button class="nu_btn btn_bootstrap _danger">Danger</button>
</p>
<p>
  <button disabled class="nu_btn btn_bootstrap">disabled</button>
  <button disabled class="nu_btn btn_bootstrap _primary">Primary</button>
  <button disabled class="nu_btn btn_bootstrap _secondary">Secondary</button>
  <button disabled class="nu_btn btn_bootstrap _warning">Warning</button>
  <button disabled class="nu_btn btn_bootstrap _success">Success</button>
  <button disabled class="nu_btn btn_bootstrap _danger">Danger</button>
</p>
<h3>按钮大小</h3>
<p>
  <button class="nu_btn btn_bootstrap _fill _primary _large">Large button</button>
  <button class="nu_btn btn_bootstrap _fill _primary">Default button</button>
  <button class="nu_btn btn_bootstrap _fill _primary _small">Small button</button>
</p>
<h3>异形按钮</h3>
<p>
  <button class="nu_btn btn_bootstrap _fill _primary _block _large">Block large</button>
</p>
<p>
  <button class="nu_btn btn_bootstrap _fill _primary _block">Block</button>
</p>

<h2>material</h2>
<h3>实心按钮「 fill 」</h3>
<p>
  <button class="nu_btn btn_material _fill _default">Default</button>
  <button class="nu_btn btn_material _fill _primary">Primary</button>
  <button class="nu_btn btn_material _fill _secondary">Secondary</button>
  <button class="nu_btn btn_material _fill" disabled>Disabled</button>
</p>
<h3>幽灵按钮「 ghost 」</h3>
<p>
  <button class="nu_btn btn_material _ghost _default">Default</button>
  <button class="nu_btn btn_material _ghost _primary">Primary</button>
  <button class="nu_btn btn_material _ghost _secondary">Secondary</button>
  <button class="nu_btn btn_material _ghost" disabled>Disabled</button>
</p>
<h3>链接按钮 「 link 」</h3>
<p>
  <button class="nu_btn btn_material _link _default">Default</button>
  <button class="nu_btn btn_material _link _primary">Primary</button>
  <button class="nu_btn btn_material _link _secondary">Secondary</button>
  <button class="nu_btn btn_material _link" disabled>Disabled</button>
</p>
<h3>异形按钮</h3>
<p>
  <button class="nu_btn btn_material _fill _circle _default">+</button>
  <button class="nu_btn btn_material _fill _circle _primary">+</button>
  <button class="nu_btn btn_material _fill _circle _secondary">+</button>
  <button class="nu_btn btn_material _fill _circle" disabled>+</button>
</p>
<h3>按钮尺寸</h3>
<p>
  <button class="nu_btn btn_material _fill _large _primary">large</button>
  <button class="nu_btn btn_material _fill _middle _primary">middle</button>
  <button class="nu_btn btn_material _fill _small _primary">Small</button>
</p>
<h2>webnovel</h2>
<h3>实心按钮「 fill 」</h3>
<p>
  <button class="nu_btn btn_webnovel _capsule _fill _primary">Primary</button>
  <button class="nu_btn btn_webnovel _capsule _fill _secondary">Secondary</button>
  <button class="nu_btn btn_webnovel _capsule _fill _warning">warning</button>
</p>
<p>
  <button class="nu_btn btn_webnovel _capsule _fill _primary" disabled>primary</button>
  <button class="nu_btn btn_webnovel _capsule _fill _secondary" disabled>Secondary</button>
  <button class="nu_btn btn_webnovel _capsule _fill _warning" disabled>warning</button>
</p>
<p>
  <button class="nu_btn btn_webnovel _capsule _fill _loading _primary"><span>primary</span></button>
  <button class="nu_btn btn_webnovel _capsule _fill _loading _secondary"><span>Secondary</span></button>
  <button class="nu_btn btn_webnovel _capsule _fill _loading _warning"><span>warning</span></button>
</p>
<h3>幽灵按钮「 ghost 」</h3>
<p>
  <button class="nu_btn btn_webnovel _capsule _ghost _primary">Primary</button>
  <button class="nu_btn btn_webnovel _capsule _ghost _secondary">Secondary</button>
  <button class="nu_btn btn_webnovel _capsule _ghost _warning">warning</button>
</p>
<p>
  <button class="nu_btn btn_webnovel _capsule _ghost _primary" disabled>Primary</button>
  <button class="nu_btn btn_webnovel _capsule _ghost _secondary" disabled>Secondary</button>
  <button class="nu_btn btn_webnovel _capsule _ghost _warning" disabled>Warning</button>
</p>
<p>
  <button class="nu_btn btn_webnovel _capsule _ghost _loading _primary"><span>Primary</span></button>
  <button class="nu_btn btn_webnovel _capsule _ghost _loading _secondary"><span>Secondary</span></button>
  <button class="nu_btn btn_webnovel _capsule _ghost _loading _warning"><span>Warning</span></button>
</p>
<h3>链接按钮「 link 」</h3>
<p>
  <button class="nu_btn btn_webnovel _capsule _link _primary">Primary</button>
  <button class="nu_btn btn_webnovel _capsule _link _secondary">Secondary</button>
  <button class="nu_btn btn_webnovel _capsule _link _warning">warning</button>
</p>
<p>
  <button disabled class="nu_btn btn_webnovel _capsule _link">Primary</button>
  <button disabled class="nu_btn btn_webnovel _capsule _link _secondary">Secondary</button>
  <button disabled class="nu_btn btn_webnovel _capsule _link _warning">warning</button>
</p>
<p>
  <button class="nu_btn btn_webnovel _capsule _link _loading"><span>Primary</span></button>
  <button class="nu_btn btn_webnovel _capsule _link _loading _secondary"><span>Secondary</span></button>
  <button class="nu_btn btn_webnovel _capsule _link _loading _warning"><span>warning</span></button>
</p>
<h3>按钮大小</h3>
<p>
  <button class="nu_btn btn_webnovel _capsule _fill _primary _large">large</button>
  <button class="nu_btn btn_webnovel _capsule _fill _primary">Default</button>
  <button class="nu_btn btn_webnovel _capsule _fill _primary _middle">Middle</button>
  <button class="nu_btn btn_webnovel _capsule _fill _primary _small">Small</button>
</p>
<h3>异形按钮</h3>
<p>
  <button class="nu_btn btn_webnovel _capsule _fill _primary">capsule</button>
  <button class="nu_btn btn_webnovel _fill _primary _circle">+</button>
</p>
<p>
  <button class="nu_btn btn_webnovel _capsule _fill _primary _block">Block</button>
</p>

External CSS

  1. https://cdn.jsdelivr.net/npm/@_nu/css-button@0.0.8/css/core.min.css
  2. https://cdn.jsdelivr.net/npm/@_nu/css-button@0.0.8/css/skins/bootstrap.min.css
  3. https://cdn.jsdelivr.net/npm/@_nu/css-button@0.0.8/css/skins/webnovel.min.css
  4. https://cdn.jsdelivr.net/npm/@_nu/css-button@0.0.8/css/skins/material.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.