Chap WordPress theme
Chap

Button

[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|animated]
Animation -
[vertical|fade]
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 orange]Orange[/button]
[button yellow]Yellow[/button]
[button olive]Olive[/button]
[button green]Green[/button]
[button teal]Teal[/button]
[button blue]Blue[/button]
[button violet]Violet[/button]
[button purple]Purple[/button]
[button pink]Pink[/button]
[button brown]Brown[/button]
[button grey]Grey[/button]
[button black]Black[/button]

[button basic red]Red[/button]
[button basic orange]Orange[/button]
[button basic yellow]Yellow[/button]
[button basic olive]Olive[/button]
[button basic green]Green[/button]
[button basic teal]Teal[/button]
[button basic blue]Blue[/button]
[button basic violet]Violet[/button]
[button basic purple]Purple[/button]
[button basic pink]Pink[/button]
[button basic brown]Brown[/button]
[button basic grey]Grey[/button]
[button basic black]Black[/button]
Inverted buttons
[segment]
  [button]Button[/button]
  [button basic]Basic button[/button]
  [button primary]Primary button[/button]
  [button secondary]Secondary button[/button]
  [button green]Green button[/button]
  [button basic green]Basic green button[/button]
[/segment]
[segment inverted]
  [button inverted]Inverted button[/button]
  [button inverted basic]Inverted basic button[/button]
  [button inverted primary]Inverted primary button[/button]
  [button inverted secondary]Inverted secondary button[/button]
  [button inverted green]Inverted green button[/button]
  [button inverted basic green]Inverted basic green button[/button]
[/segment]
[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
Attached segment
[button left attached]Left attached button[/button]
[button right attached]Right attached button[/button]

[button top attached fluid]Top attached button[/button]
[segment attached]Attached segment[/segment]
[button bottom attached fluid]Botton attached button[/button]
Call to action button example
Get started
[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 button with content shortcode
[button positive animated]
  [content visible]Download[/content]
  [content hidden]26mb[/content]
[/button]

Notes

Alternatively the [content] shortcode can be used to specify visible and hidden content.
Animated icon button
[button icon="left arrow" hover="No, that way!" hover_icon="right arrow"]This way![/button]

[button animated]
  [content visible]
    [icon left chevron]
    Visible content
  [/content]
  [content hidden]
    Hidden content
	[icon right chevron]
  [/content]
[/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]

Notes

Animated buttons have vertical and fade variations.
Button group
[buttons]
  [button]Button 1[/button]
  [button]Button 2[/button]
  [button]Button 3[/button]
[/buttons]
Button group arguments
[buttons large teal]
  [button]Button 1[/button]
  [button]Button 2[/button]
  [button]Button 3[/button]
[/buttons]

Notes

Button group arguments apply to all nested 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.
Button with gradient
[button massive fade animated twitter hover="Follow" gradient="135deg, #6eb4e8 0%, #2fa6ff 100%"]
  [icon twitter]
  Twitter
[/button]