Buttons

{headline type=»h2″ style=»heading-single» color=»color-theme» text=»Default Buttons»}

Here are some examples of the default Button Colors.

{spacer height=»40px»} {button title=»» link=»#»}Default{/button} {button title=»» link=»#» color=»btn-primary»}Primary{/button} {button title=»» link=»#» color=»btn-success»}Success{/button} {button title=»» link=»#» color=»btn-info»}Info{/button} {button title=»» link=»#» color=»btn-warning»}Warning{/button} {button title=»» link=»#» color=»btn-danger»}Danger{/button} {toggle1 title=»Shortcode»}

{button title="" link="#"}Default{/button} {button title="" link="#" color="btn-primary"}Primary{/button} {button title="" link="#" color="btn-success"}Success{/button} {button title="" link="#" color="btn-info"}Info{/button} {button title="" link="#" color="btn-warning"}Warning{/button} {button title="" link="#" color="btn-danger"}Danger{/button} 

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Bordered Buttons»}

Here are some examples of the default Button Colors.

{spacer height=»40px»} {button title=»» link=»#» style=»btn-border»}Default{/button} {button title=»» link=»#» style=»btn-border» color=»btn-primary»}Primary{/button} {button title=»» link=»#» style=»btn-border» color=»btn-success»}Success{/button} {button title=»» link=»#» style=»btn-border» color=»btn-info»}Info{/button} {button title=»» link=»#» style=»btn-border» color=»btn-warning»}Warning{/button} {button title=»» link=»#» style=»btn-border» color=»btn-danger»}{icon name=»fa-exclamation-triangle fa-margin-right»}Danger{/button} {toggle1 title=»Shortcode»}

{button title="" style="btn-border" link="#"}Default{/button} {button title="" style="btn-border" link="#" color="btn-primary"}Primary{/button} {button title="" style="btn-border" link="#" color="btn-success"}Success{/button} {button title="" style="btn-border" link="#" color="btn-info"}Info{/button} {button title="" style="btn-border" link="#" color="btn-warning"}Warning{/button} {button title="" style="btn-border" link="#" color="btn-danger"}Danger{/button} 

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Buttons with Icons»}

Here are some examples of the default Buttons in combination with Icons.

{spacer height=»40px»} {button title=»» link=»#»}Default{icon name=»fa-heart fa-margin-left»}{/button} {button title=»» link=»#» color=»btn-primary»}{icon name=»fa-archive fa-margin-right»}Primary{/button} {button title=»» link=»#» color=»btn-success»}{icon name=»fa-cloud-download fa-margin-right»}Success{/button} {button title=»» link=»#» color=»btn-info»}Info{icon name=»fa-gift fa-margin-left»}{/button} {button title=»» link=»#» color=»btn-warning»}{icon name=»fa-leaf fa-margin-right»}Warning{/button} {button title=»» link=»#» color=»btn-danger»}{icon name=»fa-quote-left fa-margin-right»}Danger{/button} {toggle1 title=»Shortcode»}

{button title="" link="#"}Default {icon name="fa-heart"}{/button} {button title="" link="#" color="btn-primary"}{icon name="fa-archive"} Primary{/button} {button title="" link="#" color="btn-success"}{icon name="fa-cloud-download"} Success{/button} {button title="" link="#" color="btn-info"}Info {icon name="fa-gift"}{/button} {button title="" link="#" color="btn-warning"}{icon name="fa-leaf"} Warning{/button} {button title="" link="#" color="btn-danger"}{icon name="fa-quote-left"} Danger{/button} 

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Buttons with different Sizes»}

Here are some examples of the default Button sizes.

{spacer height=»40px»} {button title=»» link=»#» color=»btn-info» size=»btn-xs»}Very Small{/button} {button title=»» link=»#» color=»btn-danger» size=»btn-sm»}Small{/button} {button title=»» link=»#» color=»btn-warning» size=»btn-md»}Medium{/button} {button title=»» link=»#» color=»btn-default» size=»btn-lg»}Large{/button} {button title=»» link=»#» color=»btn-info» size=»btn-xs» style=»btn-border»}Very Small{/button} {button title=»» link=»#» color=»btn-danger» size=»btn-sm» style=»btn-border»}Small{/button} {button title=»» link=»#» color=»btn-warning» size=»btn-md» style=»btn-border»}Medium{/button} {button title=»» link=»#» color=»btn-default» size=»btn-lg» style=»btn-border»}Large{/button} {toggle1 title=»Shortcode»}

{button title="" link="#" color="btn-info" size="btn-xs"}Very Small{/button} {button title="" link="#" color="btn-danger" size="btn-sm"}Small{/button} {button title="" link="#" color="btn-warning" size="btn-md"}Medium{/button} {button title="" link="#" color="btn-default" size="btn-lg"}Large{/button}

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Special Buttons»}

Here are some examples of the Buttons in combination with some special effects or other Shortcodes.

{spacer height=»40px»} {button link=»/images/sampledata/portfolio/13.jpg» color=»btn-primary» lightbox=»on»}Image{/button} {button link=»#» color=»btn-success» class=»tooltip-on» title=»I have a Tooltip here»}Tooltip{/button} {button link=»http://youtu.be/HjcPOZ_z3Ts» color=»btn-info» lightbox=»on»}YouTube{/button} {button link=»http://www.google.de» color=»btn-warning» target=»_blank»}Link in new Window{/button} {button link=»https://maps.google.com/maps?q=stuttgart&hl=de&ie=UTF8&sll=37.0625,-95.677068&sspn=83.206395,191.513672&hnear=Stuttgart,+Baden-W%C3%BCrttemberg,+Deutschland&t=m&z=12″ color=»btn-danger» lightbox=»on»}Google Map{/button} {button link=»#» color=»btn-default»}{icon name=»fa-thumbs-up fa-margin-right color-theme»}More then {counter value=»13053″ color=»color-theme»} Fans{/button} {toggle1 title=»Shortcode»}

{button link="image.jpg" color="btn-primary" lightbox="on"}Image{/button} {button link="#" color="btn-success" title="I have a Tooltip" class="tooltip-on"}Tooltip{/button} {button link="youtube-url.com" color="btn-info" lightbox="on"}YouTube{/button} {button link="http://www.google.de" color="btn-warning" target="_blank"}Link in new Window{/button} {button link="googlemap-url.com" color="btn-danger" lightbox="on"}Google Map{/button}  {button link="#" color="btn-default"}{icon name="fa-thumbs-up fa-margin-right color-theme"}More then {counter value="13053" color="color-theme"} Fans{/button} 

{/toggle}

Posted on by GM in Elements Leave a comment

Add a Comment