Style Switcher
Theme Colors
Header Color
  • support@ecada.com
  • (0123)-123-456-789

Theme components

  1. Shortcodes
  2. General Buttons
Button color
<button type="button" class="btn-e btn-block btn-e-default">Default</button>
<button type="button" class="btn-e btn-block btn-e-primary">Primary</button>
<button type="button" class="btn-e btn-block btn-e-aqua">Aqua</button>
<button type="button" class="btn-e btn-block btn-e-blue">Blue</button>
<button type="button" class="btn-e btn-block btn-e-brown">Brown</button>
<button type="button" class="btn-e btn-block btn-e-dark-blue">Dark Blue</button>
<button type="button" class="btn-e btn-block btn-e-dark-red">Dark Red</button>
<button type="button" class="btn-e btn-block btn-e-green">Green</button>
<button type="button" class="btn-e btn-block btn-e-light-green">Light Green</button>
<button type="button" class="btn-e btn-block btn-e-orange">Orange</button>
<button type="button" class="btn-e btn-block btn-e-purple">Purple</button>
<button type="button" class="btn-e btn-block btn-e-red">Red</button>
<button type="button" class="btn-e btn-block btn-e-teal">Teal</button>
<button type="button" class="btn-e btn-block btn-e-yellow">Yellow</button>
Button Icons
<button type="button" class="btn-e btn-block btn-e-default"><i class="fa fa-cloud"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-primary"><i class="fa fa-bell-o"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-aqua"><i class="fa fa-picture-o"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-blue"><i class="fa fa-download"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-brown"><i class="fa fa-clock-o"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-dark-blue"><i class="fa fa-copy"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-dark-red"><i class="fa fa-unlock"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-green"><i class="fa fa-envelope-o"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-light-green"><i class="fa fa-magic"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-orange"><i class="fa fa-search"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-purple"><i class="fa fa-unlink"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-red"><i class="fa fa-suitcase"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-teal"><i class="fa fa-trash-o"></i> Icon Button</button>
<button type="button" class="btn-e btn-block btn-e-yellow"><i class="fa fa-tags"></i> Icon Button</button>
Bootstrap Buttons
<button type="button" class="btn btn-default">Button Default</button>
<button type="button" class="btn btn-primary">Button Primary</button>
<button type="button" class="btn btn-info">Button Info</button>
<button type="button" class="btn btn-success">Button Success</button>
<button type="button" class="btn btn-warning">Button Warning</button>
<button type="button" class="btn btn-danger">Button Danger</button>
<button type="button" class="btn btn-link">Button Link</button>


<button type="button" class="btn-e btn-e-default"><i class="fa fa-sort-alpha-desc"></i></button>
<button type="button" class="btn-e btn-e-primary"><i class="fa fa-star-o"></i></button>
<button type="button" class="btn-e btn-e-aqua"><i class="fa fa-suitcase"></i></button>
<button type="button" class="btn-e btn-e-blue"><i class="fa fa-truck"></i></button>
<button type="button" class="btn-e btn-e-brown"><i class="fa fa-clock-o"></i></button>
<button type="button" class="btn-e btn-e-dark-blue"><i class="fa fa-trash-o"></i></button>
<button type="button" class="btn-e btn-e-dark-red"><i class="fa fa-shopping-cart"></i></button>
<button type="button" class="btn-e btn-e-green"><i class="fa fa-rss"></i></button>
<button type="button" class="btn-e btn-e-light-green"><i class="fa fa-reply-all"></i></button>
<button type="button" class="btn-e btn-e-orange"><i class="fa fa-print"></i></button>
<button type="button" class="btn-e btn-e-purple"><i class="fa fa-power-off"></i></button>
<button type="button" class="btn-e btn-e-red"><i class="fa fa-magic"></i></button>
<button type="button" class="btn-e btn-e-teal"><i class="fa fa-lock"></i></button>
<button type="button" class="btn-e btn-e-yellow"><i class="fa fa-file-text-o"></i></button>
Background on Hover

<button type="button" class="btn-e btn-e-default btn-bordered"><i class="fa fa-unlink"></i> Rounded</button>
<button type="button" class="btn-e btn-e-primary btn-bordered"><i class="fa fa-envelope-o"></i> Rounded</button>
<button type="button" class="btn-e btn-e-aqua btn-bordered"><i class="fa fa-sort-alpha-asc"></i> Rounded</button>
<button type="button" class="btn-e btn-e-blue btn-bordered"><i class="fa fa-download"></i> Rounded</button>
<button type="button" class="btn-e btn-e-brown btn-bordered"><i class="fa fa-bell-o"></i> Rounded</button>
<button type="button" class="btn-e btn-e-dark-blue btn-bordered"><i class="fa fa-unlink"></i> Rounded</button>
<button type="button" class="btn-e btn-e-dark-red btn-bordered"><i class="fa fa-print"></i> Rounded</button>
<button type="button" class="btn-e btn-e-green btn-bordered"><i class="fa fa-suitcase"></i> Rounded</button>
<button type="button" class="btn-e btn-e-light-green btn-bordered"><i class="fa fa-reply-all"></i> Rounded</button>
<button type="button" class="btn-e btn-e-orange btn-bordered"><i class="fa fa-magic"></i> Rounded</button>
<button type="button" class="btn-e btn-e-purple btn-bordered"><i class="fa fa-truck"></i> Rounded</button>
<button type="button" class="btn-e btn-e-red btn-bordered"><i class="fa fa-shopping-cart"></i> Rounded</button>
<button type="button" class="btn-e btn-e-teal btn-bordered"><i class="fa fa-star"></i> Rounded</button>
<button type="button" class="btn-e btn-e-yellow btn-bordered"><i class="fa fa-file-text-o"></i> Rounded</button>


<button type="button" class="btn-e rounded-2x btn-e-default btn-bordered"><i class="fa fa-unlink"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-primary btn-bordered"><i class="fa fa-envelope-o"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-aqua btn-bordered"><i class="fa fa-sort-alpha-asc"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-blue btn-bordered"><i class="fa fa-download"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-brown btn-bordered"><i class="fa fa-bell-o"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-dark-blue btn-bordered"><i class="fa fa-unlink"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-dark-red btn-bordered"><i class="fa fa-print"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-green btn-bordered"><i class="fa fa-suitcase"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-light-green btn-bordered"><i class="fa fa-reply-all"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-orange btn-bordered"><i class="fa fa-magic"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-purple btn-bordered"><i class="fa fa-truck"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-red btn-bordered"><i class="fa fa-shopping-cart"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-teal btn-bordered"><i class="fa fa-star"></i> Rounded-2x</button>
<button type="button" class="btn-e rounded-2x btn-e-yellow btn-bordered"><i class="fa fa-file-text-o"></i> Rounded-2x</button>


<button type="button" class="btn-e rounded-3x btn-e-default btn-bordered"><i class="fa fa-unlink"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-primary btn-bordered"><i class="fa fa-envelope-o"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-aqua btn-bordered"><i class="fa fa-sort-alpha-asc"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-blue btn-bordered"><i class="fa fa-download"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-brown btn-bordered"><i class="fa fa-bell-o"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-dark-blue btn-bordered"><i class="fa fa-unlink"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-dark-red btn-bordered"><i class="fa fa-print"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-green btn-bordered"><i class="fa fa-suitcase"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-light-green btn-bordered"><i class="fa fa-reply-all"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-orange btn-bordered"><i class="fa fa-magic"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-purple btn-bordered"><i class="fa fa-truck"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-red btn-bordered"><i class="fa fa-shopping-cart"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-teal btn-bordered"><i class="fa fa-star"></i> Rounded-3x</button>
<button type="button" class="btn-e rounded-3x btn-e-yellow btn-bordered"><i class="fa fa-file-text-o"></i> Rounded-3x</button>


<button type="button" class="btn-e rounded-4x btn-e-default btn-bordered"><i class="fa fa-unlink"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-primary btn-bordered"><i class="fa fa-envelope-o"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-aqua btn-bordered"><i class="fa fa-sort-alpha-asc"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-blue btn-bordered"><i class="fa fa-download"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-brown btn-bordered"><i class="fa fa-bell-o"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-dark-blue btn-bordered"><i class="fa fa-unlink"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-dark-red btn-bordered"><i class="fa fa-print"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-green btn-bordered"><i class="fa fa-suitcase"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-light-green btn-bordered"><i class="fa fa-reply-all"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-orange btn-bordered"><i class="fa fa-magic"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-purple btn-bordered"><i class="fa fa-truck"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-red btn-bordered"><i class="fa fa-shopping-cart"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-teal btn-bordered"><i class="fa fa-star"></i> Rounded-4x</button>
<button type="button" class="btn-e rounded-4x btn-e-yellow btn-bordered"><i class="fa fa-file-text-o"></i> Rounded-4x</button>

Button Sizes

<p>
    <button type="button" class="btn-e btn-e-primary btn-lg">Large button</button>
    <button type="button" class="btn-e btn-e-default btn-lg">Large button</button>
</p>
<p>
    <button type="button" class="btn-e btn-e-primary">Default button</button>
    <button type="button" class="btn-e btn-e-default">Default button</button>
</p>
<p>
    <button type="button" class="btn-e btn-e-primary btn-sm">Small button</button>
    <button type="button" class="btn-e btn-e-default btn-sm">Small button</button>
</p>
<p>
    <button type="button" class="btn-e btn-e-primary btn-xs">Extra small button</button>
    <button type="button" class="btn-e btn-e-default btn-xs">Extra small button</button>
</p>

Button block
<button type="button" class="btn-e btn-e-default btn-block btn-lg">Block level button</button>
<button type="button" class="btn-e btn-e-primary btn-block">Block level button</button>
<button type="button" class="btn-e btn-e-aqua btn-block btn-sm">Block level button</button>
<button type="button" class="btn-e btn-e-blue btn-block btn-xs">Block level button</button>
Button bordered with icon

<p>
    <button type="button" class="btn-e btn-e-default btn-bordered btn-icon btn-lg">Default <i class="fa fa-play"></i></button>
    <button type="button" class="btn-e btn-e-primary btn-bordered btn-icon btn-lg">Primary <i class="fa fa-rocket"></i></button>
</p>
<p>
    <button type="button" class="btn-e btn-e-blue btn-bordered btn-icon">Blue <i class="fa fa-commenting-o"></i></button>
    <button type="button" class="btn-e btn-e-purple btn-bordered btn-icon">Purple <i class="fa fa-download"></i></button>
</p>
<p>
    <button type="button" class="btn-e btn-e-teal btn-bordered btn-icon btn-sm">Teal <i class="fa fa-envelope-o"></i></button>
    <button type="button" class="btn-e btn-e-yellow btn-bordered btn-icon btn-sm">Yellow <i class="fa fa-gift"></i></button>
</p>
<p>
    <button type="button" class="btn-e btn-e-green btn-bordered btn-icon btn-xs">Green <i class="fa fa-link"></i></button>
    <button type="button" class="btn-e btn-e-red btn-bordered btn-icon btn-xs">Red <i class="fa fa-send"></i></button>
</p>