Button

Buttons shortcode arguments
Classes
Groupinghorizontal vertical
Emphasisprimary secondary basic positive negative
Sizemini tiny small medium large big huge massive
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Floatleft floated right floated
Othercompact inverted fluid active disabled
Button shortcode arguments
Classes
Emphasisprimary secondary basic positive negative
Sizemini tiny small medium large big huge massive
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Socialfacebook twitter google plus vk linkedin instagram youtube
Floatleft floated right floated
Iconicon right icon labeled icon right labeled icon
Othercompact inverted circular fluid active disabled animated
Animationvertical fade
hrefThe href/url/link argument can be used to specify a link.
iconName of the icon to use.
hoverText to use on hover.
hover_iconName 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
<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>

Leave a comment

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