​​​​Shortcode Examples

Buttons

http://theme.co/x/demo/integrity/1/shortcodes/buttons/#example

Let’s just say we give you some button options. A big part of any website, especially those that are selling a product or service, is the style of buttons used in your call to actions and marketing materials. Thanks to our creative development team, you have your choice of just about every button style imaginable: flat, transparent, styled and then pill shaped, rounded, or squared. Once you pick a global button style for your website, it’s as easy as adding the button shortcode and selecting your desired elements. Take a look at just a few examples. The sky is the limit, and we encourage you to play around with a style that fits best with your product, style, and brand.

3D Square

Square Button


Square Button


Square Button


Square Button


Square Button


Square Button



[button type="real" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]
[button type="real" shape="square" size="small" href="#example" title="Example"]Square Button[/button]
[button type="real" shape="square" size="regular" href="#example" title="Example"][icon type="ticket"]Square Button[/button]
[button type="real" shape="square" size="large" href="#example" title="Example"]Square Button[/button]
[button type="real" shape="square" size="x-large" href="#example" title="Example"][icon type="envelope"]Square Button[/button]
[button type="real" shape="square" size="jumbo" href="#example" title="Example"]Square Button[/button]

3D Round

Round Button


Round Button


Round Button


Round Button


Round Button


 



[button type="real" shape="rounded" size="mini" href="#example" title="Example"]Round Button[/button]
[button type="real" shape="rounded" size="small" href="#example" title="Example"][icon type="film"]Round Button[/button]
[button type="real" shape="rounded" size="regular" href="#example" title="Example"]Round Button[/button]
[button type="real" shape="rounded" size="large" href="#example" title="Example"][icon type="camera-retro"]Round Button[/button]
[button type="real" shape="rounded" size="x-large" href="#example" title="Example"]Round Button[/button]
[button type="real" shape="rounded" size="jumbo" href="#example" title="Example" icon_only="true"][icon type="money"][/button]

3D Pill

Pill Button


Pill Button


Pill Button


Pill Button


Pill Button


Pill Button



[button type="real" shape="pill" size="mini" href="#example" title="Example"]Pill Button[/button]
[button type="real" shape="pill" size="small" href="#example" title="Example"][icon type="gift"]Pill Button[/button]
[button type="real" shape="pill" size="regular" href="#example" title="Example"][icon type="thumb-tack"]Pill Button[/button]
[button type="real" shape="pill" size="large" href="#example" title="Example"][icon type="thumbs-up"]Pill Button[/button]
[button type="real" shape="pill" size="x-large" href="#example" title="Example"][icon type="folder-open"]Pill Button[/button]
[button type="real" shape="pill" size="jumbo" href="#example" title="Example"]Pill Button[/button]

Flat Square

Square Button


Square Button


Square Button


Square Button


Square Button


 



[button type="flat" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]
[button type="flat" shape="square" size="small" href="#example" title="Example"][icon type="group"]Square Button[/button]
[button type="flat" shape="square" size="regular" href="#example" title="Example"][icon type="headphones"]Square Button[/button]
[button type="flat" shape="square" size="large" href="#example" title="Example"]Square Button[/button]
[button type="flat" shape="square" size="x-large" href="#example" title="Example"]Square Button[/button]
[button type="flat" shape="square" size="jumbo" href="#example" title="Example" icon_only="true"][icon type="hdd-o"][/button]

Flat Round

Round Button


Round Button


Round Button


Round Button


Round Button


Round Button



[button type="flat" shape="rounded" size="mini" href="#example" title="Example"]Round Button[/button]
[button type="flat" shape="rounded" size="small" href="#example" title="Example"]Round Button[/button]
[button type="flat" shape="rounded" size="regular" href="#example" title="Example"]Round Button[/button]
[button type="flat" shape="rounded" size="large" href="#example" title="Example"][icon type="cogs"]Round Button[/button]
[button type="flat" shape="rounded" size="x-large" href="#example" title="Example"][icon type="home"]Round Button[/button]
[button type="flat" shape="rounded" size="jumbo" href="#example" title="Example"]Round Button[/button]

Flat Pill

Pill Button


Pill Button


Pill Button


Pill Button


Pill Button


Pill Button



[button type="flat" shape="pill" size="mini" href="#example" title="Example"]Pill Button[/button]
[button type="flat" shape="pill" size="small" href="#example" title="Example"][icon type="random"]Pill Button[/button]
[button type="flat" shape="pill" size="regular" href="#example" title="Example"][icon type="truck"]Pill Button[/button]
[button type="flat" shape="pill" size="large" href="#example" title="Example"]Pill Button[/button]
[button type="flat" shape="pill" size="x-large" href="#example" title="Example"][icon type="magic"]Pill Button[/button]
[button type="flat" shape="pill" size="jumbo" href="#example" title="Example"][icon type="pencil-square"]Pill Button[/button]

Transparent Square (On Background Image)

Hey There!

The example used below is just one of an endless amount of results you can achieve by stacking various shortcodes in X. Details on how to create this, as well as other looks, are outlined in our members area.


[button type="transparent" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]
[button type="transparent" shape="square" size="small" href="#example" title="Example"]Square Button[/button]
[button type="transparent" shape="square" size="regular" href="#example" title="Example"]Square Button[/button]
[button type="transparent" shape="square" size="large" href="#example" title="Example"]Square Button[/button]
[button type="transparent" shape="square" size="x-large" href="#example" title="Example"]Square Button[/button]
[button type="transparent" shape="square" size="jumbo" href="#example" title="Example"]Square Button[/button]

Transparent Round (On Textured Background)

Hey There!

The example used below is just one of an endless amount of results you can achieve by stacking various shortcodes in X. Details on how to create this, as well as other looks, are outlined in our members area.


[button type="transparent" shape="rounded" size="mini" href="#example" title="Example"]Round Button[/button]
[button type="transparent" shape="rounded" size="small" href="#example" title="Example"]Round Button[/button]
[button type="transparent" shape="rounded" size="regular" href="#example" title="Example"]Round Button[/button]
[button type="transparent" shape="rounded" size="large" href="#example" title="Example"]Round Button[/button]
[button type="transparent" shape="rounded" size="x-large" href="#example" title="Example"]Round Button[/button]
[button type="transparent" shape="rounded" size="jumbo" href="#example" title="Example"]Round Button[/button]

Transparent Pill

Pill Button


Pill Button


Pill Button


Pill Button


Pill Button


Pill Button



[button type="transparent" shape="pill" size="mini" href="#example" title="Example"]Pill Button[/button]
[button type="transparent" shape="pill" size="small" href="#example" title="Example"]Pill Button[/button]
[button type="transparent" shape="pill" size="regular" href="#example" title="Example"]Pill Button[/button]
[button type="transparent" shape="pill" size="large" href="#example" title="Example"]Pill Button[/button]
[button type="transparent" shape="pill" size="x-large" href="#example" title="Example"]Pill Button[/button]
[button type="transparent" shape="pill" size="jumbo" href="#example" title="Example"]Pill Button[/button]

Marketing Buttons

Marketing Buttons

Marketing Buttons

Marketing Buttons

[button type="real" shape="square" size="large" href="#example" circle="true" block="true" title="Example"]I come in...[/button]
[button type="real" shape="rounded" size="jumbo" href="#example" circle="true" block="true" title="Example"]...all shapes...[/button]
[button type="flat" shape="pill" size="jumbo" href="#example" circle="true" block="true" title="Example"]...and sizes...[/button]
[button type="flat" shape="square" size="x-large" href="#example" circle="true" block="true" title="Example"]...and colors![/button]

Block Buttons

Block Buttons Take Up The Entire Width Of Their Container


[button type="real" shape="rounded" size="large" href="#example" block="true" title="Example"]Block Buttons Take Up The Entire Width Of Their Container[/button]
[button type="real" shape="square" size="large" href="#example" circle="true" block="true" title="I can go on top, bottom, left, or right!" info="tooltip" info_place="top" info="trigger="hover"]Popovers and tooltips...[/button]
[button type="real" shape="rounded" size="jumbo" href="#example" circle="true" block="true" title="I'm a Popover!" info="popover" info_place="top" info_trigger="hover" info_content="I can go on top, bottom, left, or right! Pretty awesome, huh?"]...are great tools![/button]

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “real,” “flat,” or “transparent.”
  • shape: “square,” “rounded,” or “pill.”
  • size: “mini,” “small,” “regular,” “large,” “x-large,” or “jumbo.”
  • float: “left” or “right.”
  • block: set to “true” to make buttons go full width.
  • circle: set to “true” to add a marketing circle around your button.
  • icon_only: set to “true” if you are only using an icon in the button with no text.
  • href: input the URL you want your button to link to.
  • title: input the content for the title attribute of your button.
  • target: set to “blank” if you would like your button link to open in a new window.
  • info: “popover” or “tooltip.”
  • info_place: “top,” “left,” “right,” or “bottom.”
  • info_trigger: “hover,” “click,” or “focus.”
  • info_content: if you have selected a popover, place in your additional content here.

 

Direct Your Visitors to a Clear Action at the Bottom of the Page