Button

May 23, 2016bywebsevendev

Classes

Grouping	`horizontal` `vertical`
Emphasis	`primary` `secondary` `basic` `positive` `negative`
Size	`mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
Color	`red` `orange` `yellow` `olive` `green` `teal` `blue` `violet` `purple` `pink` `brown` `grey` `black`
Float	`left floated` `right floated`
Other	`compact` `inverted` `fluid` `active` `disabled`

Classes

Emphasis	`primary` `secondary` `basic` `positive` `negative`
Size	`mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
Color	`red` `orange` `yellow` `olive` `green` `teal` `blue` `violet` `purple` `pink` `brown` `grey` `black`
Social	`facebook` `twitter` `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]

Buttons with links

Home Google Chap

[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]

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]

Icon buttons need an 'icon' class as well as an 'icon' attribute specifing the icon name.

[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]

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]

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]

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]

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]

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]