Button

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Ex: element icon="user" then name of icons is "fa-user".

You can find the full examples of usage at Font Awesome - Font Awesome 4.0.3

Unlimited Color

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#de6b25" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#2b82a3" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#f45555" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#e93ecf" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#bab229" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#9d6bd2" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#000000" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#616161" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#279769" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#777777" background="#ffffff" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#505bc3" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#8d8611" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#6121b9" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#ff2d2d" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Color Example [/yt_buttons] 

Description Color

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="your sub title" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Button [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: home" icon_right="" subtitle="your sub title" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Button + Icon [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#4e9e41" background="#ffffff" icon="icon: home" icon_right="" subtitle="your sub title" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon + Border [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: home" icon_right="" subtitle="your sub title" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Glass Button [/yt_buttons] 

Icon + Buttons

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: home" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: photo" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: film" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: heart" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: check" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: trash-o" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: paperclip" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: star" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: search" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: map-marker" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: tag" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: dropbox" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: navicon" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: gear" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: mail-forward" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Icon Example [/yt_buttons] 

Buttons Size

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="xs" full="no" center="no" ] Mini Button [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="sm" full="no" center="no" ] Small Button [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Default Button [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="lg" full="no" center="no" ] Large Button [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="huge" full="no" center="no" ] Huge Button [/yt_buttons] 

Transparent Buttons

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="border" link="#" target="_self" color="#FFFFFF" background="#FFFFFF" icon="" icon_right="" subtitle="" radius="0px" animated_icon="no" size="default" full="no" center="no" ] Default Button [/yt_buttons] [yt_buttons type="none" style="border" link="#" target="_self" color="#FFFFFF" background="#FFFFFF" icon="icon: envelope-o" icon_right="" subtitle="" radius="0px" animated_icon="no" size="default" full="no" center="no" ] Button with icon[/yt_buttons] [yt_buttons type="none" style="border" link="#" target="_self" color="#FFFFFF" background="#FFFFFF" icon="" icon_right="" subtitle="" radius="25px" animated_icon="no" size="default" full="no" center="no" ] Radius Button ( 25px ) [/yt_buttons] 

Loading Icons Button ( Font Awesome )

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: rotate-right" icon_right="" subtitle="" radius="3px" animated_icon="yes" size="default" full="no" center="no" ] Animated Icons 1 [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: refresh" icon_right="" subtitle="" radius="3px" animated_icon="yes" size="default" full="no" center="no" ] Animated Icons 2 [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: gear" icon_right="" subtitle="" radius="3px" animated_icon="yes" size="default" full="no" center="no" ] Animated Icons 3 [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: spinner" icon_right="" subtitle="" radius="3px" animated_icon="yes" size="default" full="no" center="no" ] Animated Icons 4 [/yt_buttons] 

Button Radius

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="0px" animated_icon="no" size="default" full="no" center="no" ] 0px Radius [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] 3px Radius [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="5px" animated_icon="no" size="default" full="no" center="no" ] 5px Radius [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="10px" animated_icon="no" size="default" full="no" center="no" ] 10px Radius [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="15px" animated_icon="no" size="default" full="no" center="no" ] 15px Radius [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="20px" animated_icon="no" size="default" full="no" center="no" ] 20px Radius [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="25px" animated_icon="no" size="default" full="no" center="no" ] 25px Radius [/yt_buttons] 

Loading Icons Button ( Font Awesome )

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="0px" animated_icon="no" size="default" full="no" center="no" ] Default Button [/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="icon: envelope-o" icon_right="" subtitle="" radius="0px" animated_icon="no" size="default" full="no" center="no" ] Button with icon[/yt_buttons] [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="25px" animated_icon="no" size="default" full="no" center="no" ] Radius Button ( 25px ) [/yt_buttons] 

More Style Buttons

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Get the codes
 [yt_buttons type="none" style="default" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Default Button [/yt_buttons] [yt_buttons type="none" style="glass" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Glass with icon[/yt_buttons] [yt_buttons type="none" style="stroked" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Stroked Button [/yt_buttons] [yt_buttons type="none" style="border" link="#" target="_self" color="#000" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Border Button [/yt_buttons] [yt_buttons type="none" style="line" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Bottom line Button [/yt_buttons] [yt_buttons type="none" style="gradient" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Gradient Button [/yt_buttons] [yt_buttons type="none" style="3d" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] 3D Button[/yt_buttons] [yt_buttons type="none" style="dropshadow" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Drop Shadow [/yt_buttons] [yt_buttons type="none" style="insetshadow" link="#" target="_self" color="#FFFFFF" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Inner Shadow [/yt_buttons] [yt_buttons type="none" style="dot" link="#" target="_self" color="#000" background="#4e9e41" icon="" icon_right="" subtitle="" radius="3px" animated_icon="no" size="default" full="no" center="no" ] Dot Button [/yt_buttons] 

Customization Options / Features

  • type : style of the button. You can combine the following options(primary, info, success, warning, danger, inverse, link, flat)
  • icon : add any mini-icon (from the Icons section) here.
  • size : available sizes ( xs, sm, default, lg)
  • full : the full width of a parent
  • target : link target (eg. target="_blank" will open link in a new window)
  • state : disabled buttons, available ( true, disabled)
Top