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