[buttons] shortcode arguments
classes:
Grouping -
[horizontal|vertical]
Emphasis -
[primary|secondary|basic|positive|negative]
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Color -
[red|green|blue|...]
Float -
[left floated|right floated]
Other -
[compact|inverted|fluid|active|disabled]
[button] shortcode arguments
classes:
Emphasis -
[primary|secondary|basic|positive|negative]
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Color -
[red|green|blue|...]
Social -
[facebook|twitter|google plus|vk|linkedin|instagram|youtube]
Float -
[left floated|right floated]
Icon -
[icon|right icon|labeled icon|right labeled icon]
Other -
[compact|inverted|circular|fluid|active|disabled]
href:
The href/url/link argument can be used to specify a link.
icon:
Name of the icon to use.
hover:
Text to use on hover.
hover_icon:
Name of the icon to use on hover.
Button types
<button>Button</button>
<button primary>Primary button</button>
<button secondary>Secondary button</button>
<button positive>Positive button</button>
<button negative>Negative button</button>
<button basic>Basic button</button>
<button compact>Compact button</button>
<button fluid>Fluid button</button>
<button left floated>Left floated</button>
<button right floated>Right floated</button>
Button sizes
<button mini>Mini</button>
<button tiny>Tiny</button>
<button small>Small</button>
<button>Medium</button>
<button large>Large</button>
<button big>Big</button>
<button huge>Huge</button>
<button massive>Massive</button>
Button colors
<button red>Red</button>
<button basic orange>Orange</button>
<button yellow>Yellow</button>
<button basic olive>Olive</button>
<button green>Green</button>
<button basic teal>Teal</button>
<button blue>Blue</button>
<button basic violet>Violet</button>
<button purple>Purple</button>
<button basic pink>Pink</button>
<button brown>Brown</button>
<button basic grey>Grey</button>
<button black>Black</button>
<button url="/home">Home</button>
<button positive link="https://google.com" target="_blank">Google</button>
<button secondary right labeled icon href="https://chap.website" target="_blank" rel="noopener" icon="external">Chap</button>
Notes
The link attribute has 3 aliases: url, link or href. Attributes such as target, rel, download, tabindex or data are also supported.
Button states
<button>Button</button>
<button active>Active</button>
<button disabled>Disabled</button>
Icon buttons
<button icon icon="pause"></button>
<button labeled icon icon="pause">Pause</button>
<button right labeled icon icon="play">Play</button>
<button circular icon icon="play"></button>
<button positive icon icon="download"></button>
<button basic labeled icon icon="file">New</button>
Notes
Icon buttons need an 'icon' class as well as an 'icon' attribute specifing the icon name.
Social buttons
<button facebook icon="facebook">Facebook</button>
<button twitter icon="twitter">Twitter</button>
<button google plus icon="google plus">Google Plus</button>
<button vk icon="vk">VK</button>
<button linkedin icon="linkedin">LinkedIn</button>
<button instagram icon="instagram">Instagram</button>
<button youtube icon="youtube">YouTube</button>
<button facebook icon icon="facebook"></button>
<button circular mini twitter icon icon="twitter"></button>
Attached buttons
<button left attached>Left</button>
<button right attached>Right</button>
Call to action button example
<button huge primary right labeled icon icon="right arrow" url="/get-started">Get started</button>
Animated button
<button hover="Let's do this">Get started</button>
Notes
Adding a 'hover' parameter will make an animated button.
Animated icon button
<button large icon icon="left arrow" hover="No, that way!" hover_icon="right arrow">This way!</button>
Animated button examples
<button hover_icon="right arrow">Next</button>
<button vertical icon="shop" hover="Shop"></button>
<button fade hover="$12.99 a month">Sign-up for a Pro account</button>
Button group
<buttons>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</buttons>
Button group arguments
<buttons large>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</buttons>
Vertical button group
<buttons vertical>
  <button>Button 1</button>
  <button active>Button 2</button>
  <button>Button 3</button>
</buttons>
Conditional button group
<buttons>
  <button positive>Yes</button>
  <div or data-text="OR">
  <button negative>No</button>
</buttons>
Center aligned button
<segment basic center aligned>
  <button big primary>Center aligned button</button>
</segment>
Notes
Button can be wrapped in a basic segment to center align it.

Leave a comment

Your email address will not be published. Required fields are marked *