Button
Buttons shortcode arguments
| Classes |
|
Button shortcode arguments
| Classes |
| ||||||||||||||||
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>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 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 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><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>Button</button>
<button active>Active</button>
<button disabled>Disabled</button><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.<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><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><button huge primary right labeled icon icon="right arrow" url="/get-started">Get started</button><button hover="Let's do this">Get started</button>Notes
Adding a hover parameter will make an animated button.<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.<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><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.<buttons>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</buttons><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.<buttons vertical>
<button>Button 1</button>
<button active>Button 2</button>
<button>Button 3</button>
</buttons><buttons>
<button positive>Yes</button>
<div or data-text="OR">
<button negative>No</button>
</buttons><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 massive fade animated twitter hover="Follow" gradient="135deg, #6eb4e8 0%, #2fa6ff 100%">
<icon twitter>
Twitter
</button>