[buttons] shortcode arguments
Grouping -
Emphasis -
Size -
Color -
Float -
[left floated|right floated]
Other -
[button] shortcode arguments
Emphasis -
Size -
Color -
Social -
[facebook|twitter|google plus|vk|linkedin|instagram|youtube]
Float -
[left floated|right floated]
Icon -
[icon|right icon|labeled icon|right labeled icon]
Other -
Animation -
The href/url/link argument can be used to specify a link.
Name of the icon to use.
Text to use on hover.
Name of the icon to use on hover.
Button types
<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 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
  <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 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>
<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 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.
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
<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>
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 hidden>
    Hidden content
	<icon right chevron>
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
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
Button group arguments
<buttons large teal>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
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>
Conditional button group
  <button positive>Yes</button>
  <div or data-text="OR">
  <button negative>No</button>
Center aligned button
<segment basic center aligned>
  <button big primary>Center aligned button</button>
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>

Leave a comment

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