Components Sample
Documentation
General
Template
Layout
Typography
Navigational
Informational
Data
Input
Images
Header
Footer
NeonUI-Documentation Buttons
Components - Info Display

Input Components - Buttons

Buttons as Input Components

Buttons - Provide input and invoke actions

  • Buttons could be created using elements div span, a anchor elements. It is designed to be inblock elements.

Button - Submit

Implementation Code and the output

<span class="button-submit">
  Show All
</span>

<div class="button-submit">
  Submit
  <i class="ph-bold ph-download-simple"></i>
</div>

<a class="button-submit" href="">
  Download
  <i class="ph-bold ph-download-simple"></i>
</a>

Output Sample

Show All
Submit
Download

Button - Feedback

Implementation Code and the output

<a href="" class="button-feedback">
  <i class="fa-regular fa-thumbs-up"></i>
  Yes
</a>
<a href="" class="button-feedback">
  <i class="fa-regular fa-thumbs-down"></i>
  No
</a>

<span class="button-feedback">
  <i class="fa-regular fa-thumbs-up"></i>
  Yes
</span>
<span class="button-feedback">
  <i class="fa-regular fa-thumbs-down"></i>
  No
</span>

<div class="button-feedback">
  Yes
</div>
<div class="button-feedback">
  No
</div>

Output Sample

Yes No Yes No
Yes
No

Button - Black Classic

Implementation Code and the output

<span class="button-black-classic">
  Show All
</span>

<div class="button-black-classic">
  black-classic
  <i class="ph-bold ph-download-simple"></i>
</div>

<a class="button-submit" href="">
  Download
  <i class="ph-bold ph-download-simple"></i>
</a>

Output Sample

Show all
Submit
Download

Button - Black

Implementation Code and the output

<span class="button-black">
  Show All
</span>
  
<div class="button-black">
  Submit
  <i class="ph-bold ph-download-simple"></i>
</div>
  
<a class="button-black" href="">
  Download
  <i class="ph-bold ph-download-simple"></i>
</a>

Output Sample

Show all
Submit
Download

Button - Grey

Implementation Code and the output

<span class="button-grey">
  Show All
</span>
  
<div class="button-grey">
  Submit
  <i class="ph-bold ph-download-simple"></i>
</div>
  
<a class="button-grey" href="">
  Download
  <i class="ph-bold ph-download-simple"></i>
</a>

Output Sample

Show all
Submit
Download

Button - Grey Translucent

Implementation Code and the output

<span class="button-grey-translucent">
  Show All
</span>
  
<div class="button-grey-translucent">
  Submit
  <i class="ph-bold ph-download-simple"></i>
</div>
  
<a class="button-grey-translucent" href="">
  Download
  <i class="ph-bold ph-download-simple"></i>
</a>

Output Sample

Show all
Submit
Download

Button - Long

Implementation Code and the output

<span class="button-long">
  Show All
</span>
  
<div class="button-long">
  Submit
  <i class="ph-bold ph-download-simple"></i>
</div>
  
<a class="button-long" href="">
  Download
  <i class="ph-bold ph-download-simple"></i>
</a>

Output Sample

Show all
Submit
Download
Prev
Data Components - Accordion
Next
Input Components - Buttons Navigation