Buttons

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.

Color Example Color Example Color Example Color Example Color Example Color Example Color Example Color Example Color Example Color Example Color Example Color Example Color Example Color Example Color Example

 [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

Button your sub title Button + Icon your sub title Icon + Border your sub title Glass Button your sub title

 [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

Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example Icon Example

 [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

Mini Button Small Button Default Button Large Button Huge Button

 [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

Default Button Button with icon Radius Button ( 25px )

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

Animated Icons 1 Animated Icons 2 Animated Icons 3 Animated Icons 4

 [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

0px Radius 3px Radius 5px Radius 10px Radius 15px Radius 20px Radius 25px Radius

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

Default Button Button with icon Radius Button ( 25px )

 [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

Default Button Glass with icon Stroked Button Border Button Bottom line Button Gradient Button 3D Button Drop Shadow Inner Shadow Dot Button

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