<button class="btn">Button</button>
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>
<button className="btn">Button</button>
<button className="btn btn-neutral">Neutral</button>
<button className="btn btn-primary">Primary</button>
<button className="btn btn-secondary">Secondary</button>
<button className="btn btn-accent">Accent</button>
<button className="btn btn-ghost">Ghost</button>
<button className="btn btn-link">Link</button>
<button btn>Button</button>
<button btn btn-neutral>Neutral</button>
<button btn btn-primary>Primary</button>
<button btn btn-secondary>Secondary</button>
<button btn btn-accent>Accent</button>
<button btn btn-ghost>Ghost</button>
<button btn btn-link>Link</button>
<button class="btn">Button</button>
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>
<button className="btn">Button</button>
<button className="btn btn-neutral">Neutral</button>
<button className="btn btn-primary">Primary</button>
<button className="btn btn-secondary">Secondary</button>
<button className="btn btn-accent">Accent</button>
<button className="btn btn-ghost">Ghost</button>
<button className="btn btn-link">Link</button>
<button btn>Button</button>
<button btn btn-neutral>Neutral</button>
<button btn btn-primary>Primary</button>
<button btn btn-secondary>Secondary</button>
<button btn btn-accent>Accent</button>
<button btn btn-ghost>Ghost</button>
<button btn btn-link>Link</button>
<button class="btn btn-active">Default</button>
<button class="btn btn-active btn-neutral">Neutral</button>
<button class="btn btn-active btn-primary">Primary</button>
<button class="btn btn-active btn-secondary">Secondary</button>
<button class="btn btn-active btn-accent">Accent</button>
<button class="btn btn-active btn-ghost">Ghost</button>
<button class="btn btn-active btn-link">Link</button>
<button className="btn btn-active">Default</button>
<button className="btn btn-active btn-neutral">Neutral</button>
<button className="btn btn-active btn-primary">Primary</button>
<button className="btn btn-active btn-secondary">Secondary</button>
<button className="btn btn-active btn-accent">Accent</button>
<button className="btn btn-active btn-ghost">Ghost</button>
<button className="btn btn-active btn-link">Link</button>
<button btn btn-active>Default</button>
<button btn btn-active btn-neutral>Neutral</button>
<button btn btn-active btn-primary>Primary</button>
<button btn btn-active btn-secondary>Secondary</button>
<button btn btn-active btn-accent>Accent</button>
<button btn btn-active btn-ghost>Ghost</button>
<button btn btn-active btn-link>Link</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button className="btn btn-info">Info</button>
<button className="btn btn-success">Success</button>
<button className="btn btn-warning">Warning</button>
<button className="btn btn-error">Error</button>
<button btn btn-info>Info</button>
<button btn btn-success>Success</button>
<button btn btn-warning>Warning</button>
<button btn btn-error>Error</button>
<button class="btn btn-outline">Default</button>
<button class="btn btn-outline btn-primary">Primary</button>
<button class="btn btn-outline btn-secondary">Secondary</button>
<button class="btn btn-outline btn-accent">Accent</button>
<button className="btn btn-outline">Default</button>
<button className="btn btn-outline btn-primary">Primary</button>
<button className="btn btn-outline btn-secondary">Secondary</button>
<button className="btn btn-outline btn-accent">Accent</button>
<button btn btn-outline>Default</button>
<button btn btn-outline btn-primary>Primary</button>
<button btn btn-outline btn-secondary>Secondary</button>
<button btn btn-outline btn-accent>Accent</button>
<button class="btn btn-outline btn-info">Info</button>
<button class="btn btn-outline btn-warning">Warning</button>
<button class="btn btn-outline btn-error">Error</button>
<button className="btn btn-outline btn-info">Info</button>
<button className="btn btn-outline btn-warning">Warning</button>
<button className="btn btn-outline btn-error">Error</button>
<button btn btn-outline btn-info>Info</button>
<button btn btn-outline btn-warning>Warning</button>
<button btn btn-outline btn-error>Error</button>
<button class="btn btn-lg">Large</button>
<button class="btn">Normal</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Tiny</button>
<button className="btn btn-lg">Large</button>
<button className="btn">Normal</button>
<button className="btn btn-sm">Small</button>
<button className="btn btn-xs">Tiny</button>
<button btn btn-lg>Large</button>
<button btn>Normal</button>
<button btn btn-sm>Small</button>
<button btn btn-xs>Tiny</button>
<button class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg">Responsive</button>
<button className="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg">Responsive</button>
<button btn btn-xs sm:btn-sm md:btn-md lg:btn-lg>Responsive</button>
<button class="btn btn-wide">Wide</button>
<button className="btn btn-wide">Wide</button>
<button btn btn-wide>Wide</button>
<button class="btn glass">Glass button</button>
<button className="btn glass">Glass button</button>
<button btn glass>Glass button</button>
You can use 'btn' class on <button>, <input>, <a>, etc...
Link
<a role="button" class="btn">Link</a>
<button type="submit" class="btn">Button</button>
<input type="button" value="Input" class="btn" />
<input type="submit" value="Submit" class="btn" />
<input type="radio" aria-label="Radio" class="btn" />
<input type="checkbox" aria-label="Checkbox" class="btn" />
<input type="reset" value="Reset" class="btn" />
<a role="button" className="btn">Link</a>
<button type="submit" className="btn">Button</button>
<input type="button" value="Input" className="btn" />
<input type="submit" value="Submit" className="btn" />
<input type="radio" aria-label="Radio" className="btn" />
<input type="checkbox" aria-label="Checkbox" className="btn" />
<input type="reset" value="Reset" className="btn" />
<a role="button" btn>Link</a>
<button type="submit" btn>Button</button>
<input type="button" value="Input" btn />
<input type="submit" value="Submit" btn />
<input type="radio" aria-label="Radio" btn />
<input type="checkbox" aria-label="Checkbox" btn />
<input type="reset" value="Reset" btn />
<button class="btn" disabled="disabled">Disabled using attribute</button>
<button class="btn btn-disabled" tabindex="-1" role="button" aria-disabled="true">
  Disabled using class name
</button>
<button className="btn" disabled="disabled">Disabled using attribute</button>
<button className="btn btn-disabled" tabindex="-1" role="button" aria-disabled="true">
  Disabled using className name
</button>
<button btn disabled="disabled">Disabled using attribute</button>
<button btn btn-disabled tabindex="-1" role="button" aria-disabled="true">
  Disabled using class name
</button>
<button class="btn btn-square">
  <i class="i-carbon-close text-3xl"></i>
</button>
<button class="btn btn-square btn-outline">
  <i class="i-carbon-close text-3xl"></i>
</button>
<button className="btn btn-square">
  <i className="i-carbon-close text-3xl"></i>
</button>
<button className="btn btn-square btn-outline">
  <i className="i-carbon-close text-3xl"></i>
</button>
<button btn btn-square>
  <i i-carbon-close text-3xl></i>
</button>
<button btn btn-square btn-outline>
  <i i-carbon-close text-3xl></i>
</button>
<button class="btn btn-circle">
  <i class="i-carbon-close text-3xl"></i>
</button>
<button class="btn btn-circle btn-outline">
  <i class="i-carbon-close text-3xl"></i>
</button>
<button className="btn btn-circle">
  <i className="i-carbon-close text-3xl"></i>
</button>
<button className="btn btn-circle btn-outline">
  <i className="i-carbon-close text-3xl"></i>
</button>
<button btn btn-circle>
  <i i-carbon-close text-3xl></i>
</button>
<button btn btn-circle btn-outline>
  <i i-carbon-close text-3xl></i>
</button>
<button class="btn">
  <i class="i-carbon-favorite text-3xl"></i>
  Button
</button>
<button className="btn">
  <i className="i-carbon-favorite text-3xl"></i>
  Button
</button>
<button btn>
  <i i-carbon-favorite text-3xl></i>
  Button
</button>
<button class="btn">
  Button
  <i class="i-carbon-favorite text-3xl"></i>
</button>
<button className="btn">
  Button
  <i className="i-carbon-favorite text-3xl"></i>
</button>
<button btn>
  Button
  <i i-carbon-favorite text-3xl></i>
</button>
<button class="btn btn-block">
  Button Block
</button>
<button className="btn btn-block">
  Button Block
</button>
<button btn btn-block>
  Button Block
</button>
<button class="btn btn-circle">
  <span class="loading loading-spinner"></span>
</button>
<button class="btn">
  <span class="loading loading-spinner"></span>
  loading
</button>
<button className="btn btn-circle">
  <span className="loading loading-spinner"></span>
</button>
<button className="btn">
  <span className="loading loading-spinner"></span>
  loading
</button>
<button btn btn-circle>
  <span loading loading-spinner></span>
</button>
<button btn>
  <span loading loading-spinner></span>
  loading
</button>