Buttons

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

[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

[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

[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

[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

[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

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

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

[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

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

[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

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