Home > Shortcodes > Buttons

Buttons

MINI BUTTONS

Default button Primary button Info button Success button Warning button Danger button Inverse button [toggle title=”Get the code” hidden=”true”] [button bgcolor="red"]Red button[/button] [/toggle]

SMALL BUTTONS

Default button Primary button Info button Success button Warning button Danger button Inverse button [toggle title=”Get the code” hidden=”true”] [button size=”btn-small” class=”btn-danger”]Danger button[/button] [/toggle]  

DEFAULT Buttons

Default button Primary button Info button Success button Warning button Danger button Inverse button [toggle title=”Get the code” hidden=”true”] [button size=”medium” bgcolor=”black”]Black button[/button] [/toggle]  

Large Buttons

Default button Primary button Info button Success button Warning button Danger button Inverse button [toggle title=”Get the code” hidden=”true”] [button size=”large” bgcolor=”azure”]Azure button[/button] [/toggle]  

MINI Rounded BUTTONS

Default button Primary button Info button Success button Warning button Danger button Inverse button [toggle title=”Get the code” hidden=”true”] [button class="btn-primary" type="rounded-button" size="mini"]Primary button[/button] [/toggle]

SMALL Rounded BUTTONS

Default button Primary button Info button Success button Warning button Danger button Inverse button [toggle title=”Get the code” hidden=”true”] [button class="btn-primary" type="rounded-button" size="small"]Primary button[/button] [/toggle]  

DEFAULT Rounded Buttons

Default button Primary button Info button Success button Warning button Danger button Inverse button [toggle title=”Get the code” hidden=”true”] [button class="btn-inverse" type="rounded-button"]Inverse button[/button] [/toggle]  

Large Rounded Buttons

Default button Primary button Info button Success button Warning button Danger button Inverse button [toggle title=”Get the code” hidden=”true”] [button size=”large” class=”btn-primary” type=”rounded-button”]Primary button[/button] [/toggle]
Predefined classes: default, primary, info, success, warning, danger, inverse
List of possible attributes:
  • target- Link target (_blank, _self)
  • href – Url (http://www.example.com/)
  • class – Custom button class which you can use to style it differently
  • size – Button size (small, medium, large)
  • border_color – Button border color
  • bgcolor – Button background color
  • type – Type (button, rounded-button)