Logo
  1. Home
  2. Shortcode
  3. Button List
Example of Button & List

Part of Keid

  • Element
  • Size
  • Color
  • Style
  • Button App

Example of Element

<button class="button">Button</button>
Anchor Button 
<a href="#" class="button">Anchor Button</a>
<input type="submit" class="button" value="Submit Button">
<input type="button" class="button" value="Input Button">
Link Button 
<a href="#" class="button link">Link Button</a>
Icon Button 
<a href="#" class="button link">Link Button</a>
Button Right Icon 
<a href="#" class="button button-icon-right">
   Button Right Icon 
   <span class="button-icon">
      <i class="fa fa-chevron-right"></i>
   </span>
</a>
Button Left Icon 
<a href="#" class="button button-icon-left">
   <span class="button-icon">
      <i class="fa fa-chevron-right"></i>
   </span> 
   Button Left Icon
</a>

Example of Size

Small Button 
<a href="#" class="button small">Small Button</a>
Default Button 
<a href="#" class="button">Default Button</a>
Large Button 
<a href="#" class="button large">Large Button</a>

Example of Color

Button Default 
<a href="#" class="button">Button Default</a>
Button Green 
<a href="#" class="button green">Button Green</a>
Button Blue 
<a href="#" class="button blue">Button Blue</a>
Button Yellow 
<a href="#" class="button yellow">Button Yellow</a>
Button Red 
<a href="#" class="button red">Button Red</a>
Button Gray 
<a href="#" class="button gray">Button Gray</a>
Button White 
<a href="#" class="button white">Button White</a>
Button Black 
<a href="#" class="button black">Button Black</a>

Example of Style

Button Default 
<a href="#" class="button">Button Default</a>
Button Radius 
<a href="#" class="button radius">Button Radius</a>
Button Round 
<a href="#" class="button round">Button Round</a>
Button Block 
<a href="#" class="button button-block">Button Block</a>
Button border 
<a href="#" class="button button-border">Button border</a>
Button border 
<a href="#" class="button button-border">
   Button border
</a>
Button round 
<a href="#" class="button button-border round">
   Button Round
</a>

List Item

class="list-circle-check"
class="list-arrow"
class="list-arrow-circle"
class="list-no-bullet"
class="list-disc"
class="list-square"
class="list-number"
  1. List Item
  2. List Item
  3. List Item
    1. List Item
    2. List Item
    3. List Item
  4. List Item
  5. List Item
  6. List Item
class="list-square-check"