{"id":285,"date":"2014-05-24T06:29:56","date_gmt":"2014-05-24T11:29:56","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/integrity\/10\/?page_id=285"},"modified":"2014-05-24T06:29:56","modified_gmt":"2014-05-24T11:29:56","slug":"buttons","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/icon-1\/shortcodes\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"
\n

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.<\/p>\n

3D Square<\/span><\/h2>\nSquare Button<\/a>
\nSquare Button<\/a>
\n<\/i>Square Button<\/a>
\nSquare Button<\/a>
\n<\/i>Square Button<\/a>
\nSquare Button<\/a>
\n
\n
[button type=\"real\" shape=\"square\" size=\"mini\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"square\" size=\"small\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"square\" size=\"regular\" href=\"#example\" title=\"Example\"][icon type=\"ticket\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"square\" size=\"large\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"square\" size=\"x-large\" href=\"#example\" title=\"Example\"][icon type=\"envelope\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"square\" size=\"jumbo\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
3D Round<\/span><\/h2>\nRound Button<\/a>
\n<\/i>Round Button<\/a>
\nRound Button<\/a>
\n<\/i>Round Button<\/a>
\nRound Button<\/a>
\n<\/i><\/a>
\n
\n
[button type=\"real\" shape=\"rounded\" size=\"mini\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"rounded\" size=\"small\" href=\"#example\" title=\"Example\"][icon type=\"film\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"rounded\" size=\"regular\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"rounded\" size=\"large\" href=\"#example\" title=\"Example\"][icon type=\"camera-retro\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"rounded\" size=\"x-large\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"rounded\" size=\"jumbo\" href=\"#example\" title=\"Example\" icon_only=\"true\"][icon type=\"money\"][\/button]<\/code><\/pre>\n
3D Pill<\/span><\/h2>\nPill Button<\/a>
\n<\/i>Pill Button<\/a>
\n<\/i>Pill Button<\/a>
\n<\/i>Pill Button<\/a>
\n<\/i>Pill Button<\/a>
\nPill Button<\/a>
\n
\n
[button type=\"real\" shape=\"pill\" size=\"mini\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"pill\" size=\"small\" href=\"#example\" title=\"Example\"][icon type=\"gift\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"pill\" size=\"regular\" href=\"#example\" title=\"Example\"][icon type=\"thumb-tack\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"pill\" size=\"large\" href=\"#example\" title=\"Example\"][icon type=\"thumbs-up\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"pill\" size=\"x-large\" href=\"#example\" title=\"Example\"][icon type=\"folder-open\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"pill\" size=\"jumbo\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
Flat Square<\/span><\/h2>\nSquare Button<\/a>
\n<\/i>Square Button<\/a>
\n<\/i>Square Button<\/a>
\nSquare Button<\/a>
\nSquare Button<\/a>
\n<\/i><\/a>
\n
\n
[button type=\"flat\" shape=\"square\" size=\"mini\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"square\" size=\"small\" href=\"#example\" title=\"Example\"][icon type=\"group\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"square\" size=\"regular\" href=\"#example\" title=\"Example\"][icon type=\"headphones\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"square\" size=\"large\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"square\" size=\"x-large\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"square\" size=\"jumbo\" href=\"#example\" title=\"Example\" icon_only=\"true\"][icon type=\"hdd-o\"][\/button]<\/code><\/pre>\n
Flat Round<\/span><\/h2>\nRound Button<\/a>
\nRound Button<\/a>
\nRound Button<\/a>
\n<\/i>Round Button<\/a>
\n<\/i>Round Button<\/a>
\nRound Button<\/a>
\n
\n
[button type=\"flat\" shape=\"rounded\" size=\"mini\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"rounded\" size=\"small\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"rounded\" size=\"regular\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"rounded\" size=\"large\" href=\"#example\" title=\"Example\"][icon type=\"cogs\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"rounded\" size=\"x-large\" href=\"#example\" title=\"Example\"][icon type=\"home\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"rounded\" size=\"jumbo\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
Flat Pill<\/span><\/h2>\nPill Button<\/a>
\n<\/i>Pill Button<\/a>
\n<\/i>Pill Button<\/a>
\nPill Button<\/a>
\n<\/i>Pill Button<\/a>
\n<\/i>Pill Button<\/a>
\n
\n
[button type=\"flat\" shape=\"pill\" size=\"mini\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"pill\" size=\"small\" href=\"#example\" title=\"Example\"][icon type=\"random\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"pill\" size=\"regular\" href=\"#example\" title=\"Example\"][icon type=\"truck\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"pill\" size=\"large\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"pill\" size=\"x-large\" href=\"#example\" title=\"Example\"][icon type=\"magic\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"pill\" size=\"jumbo\" href=\"#example\" title=\"Example\"][icon type=\"pencil-square\"]Pill Button[\/button]<\/code><\/pre>\n
Transparent Square (On Background Image)<\/span><\/h2>\n
Hey There!<\/h6>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.<\/div>\n
\n
\nSquare Button<\/a>
\nSquare Button<\/a>
\nSquare Button<\/a>
\nSquare Button<\/a>
\nSquare Button<\/a>
\nSquare Button<\/a>
\n<\/div>\n<\/div><\/div>\n
\n
[button type=\"transparent\" shape=\"square\" size=\"mini\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"square\" size=\"small\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"square\" size=\"regular\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"square\" size=\"large\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"square\" size=\"x-large\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"square\" size=\"jumbo\" href=\"#example\" title=\"Example\"]Square Button[\/button]<\/code><\/pre>\n
Transparent Round (On Textured Background)<\/span><\/h2>\n
Hey There!<\/h6>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.<\/div>\n
\n
\nRound Button<\/a>
\nRound Button<\/a>
\nRound Button<\/a>
\nRound Button<\/a>
\nRound Button<\/a>
\nRound Button<\/a>
\n<\/div>\n<\/div><\/div>\n
\n
[button type=\"transparent\" shape=\"rounded\" size=\"mini\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"rounded\" size=\"small\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"rounded\" size=\"regular\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"rounded\" size=\"large\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"rounded\" size=\"x-large\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"rounded\" size=\"jumbo\" href=\"#example\" title=\"Example\"]Round Button[\/button]<\/code><\/pre>\n
Transparent Pill<\/span><\/h2>\nPill Button<\/a>
\nPill Button<\/a>
\nPill Button<\/a>
\nPill Button<\/a>
\nPill Button<\/a>
\nPill Button<\/a>
\n
\n
[button type=\"transparent\" shape=\"pill\" size=\"mini\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"pill\" size=\"small\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"pill\" size=\"regular\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"pill\" size=\"large\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"pill\" size=\"x-large\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
[button type=\"transparent\" shape=\"pill\" size=\"jumbo\" href=\"#example\" title=\"Example\"]Pill Button[\/button]<\/code><\/pre>\n
\n
Marketing Buttons<\/span><\/h2>\n
I come in…<\/a><\/div>\n<\/div>\n
\n
Marketing Buttons<\/span><\/h2>\n
…all shapes…<\/a><\/div>\n<\/div>\n
\n
\n
Marketing Buttons<\/span><\/h2>\n
…and sizes…<\/a><\/div>\n<\/div>\n
\n
Marketing Buttons<\/span><\/h2>\n
…and colors!<\/a><\/div>\n<\/div>\n
\n
[button type=\"real\" shape=\"square\" size=\"large\" href=\"#example\" circle=\"true\" block=\"true\" title=\"Example\"]I come in...[\/button]<\/code><\/pre>\n
[button type=\"real\" shape=\"rounded\" size=\"jumbo\" href=\"#example\" circle=\"true\" block=\"true\" title=\"Example\"]...all shapes...[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"pill\" size=\"jumbo\" href=\"#example\" circle=\"true\" block=\"true\" title=\"Example\"]...and sizes...[\/button]<\/code><\/pre>\n
[button type=\"flat\" shape=\"square\" size=\"x-large\" href=\"#example\" circle=\"true\" block=\"true\" title=\"Example\"]...and colors![\/button]<\/code><\/pre>\n
Block Buttons<\/span><\/h2>\nBlock Buttons Take Up The Entire Width Of Their Container<\/a>\n
\n
[button type=\"real\" shape=\"rounded\" size=\"large\" href=\"#example\" block=\"true\" title=\"Example\"]Block Buttons Take Up The Entire Width Of Their Container[\/button]<\/code><\/pre>\n
\n
Tooltips<\/span><\/h2>\n
Popovers and tooltips…<\/a><\/div>\n<\/div>\n
\n
Popovers<\/span><\/h2>\n
…are great tools!<\/a><\/div>\n<\/div>\n
\n
[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]<\/code><\/pre>\n
[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]<\/code><\/pre>\n
Options<\/span><\/h2>\n
    \n
  • <\/i>id<\/strong>: add a unique ID to the shortcode.<\/li>\n
  • <\/i>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n
  • <\/i>style<\/strong>: add inline styles to the shortcode.<\/li>\n
  • <\/i>type<\/strong>: “real,” “flat,” or “transparent.”<\/li>\n
  • <\/i>shape<\/strong>: “square,” “rounded,” or “pill.”<\/li>\n
  • <\/i>size<\/strong>: “mini,” “small,” “regular,” “large,” “x-large,” or “jumbo.”<\/li>\n
  • <\/i>float<\/strong>: “left” or “right.”<\/li>\n
  • <\/i>block<\/strong>: set to “true” to make buttons go full width.<\/li>\n
  • <\/i>circle<\/strong>: set to “true” to add a marketing circle around your button.<\/li>\n
  • <\/i>icon_only<\/strong>: set to “true” if you are only using an icon in the button with no text.<\/li>\n
  • <\/i>href<\/strong>: input the URL you want your button to link to.<\/li>\n
  • <\/i>title<\/strong>: input the content for the title attribute of your button.<\/li>\n
  • <\/i>target<\/strong>: set to “blank” if you would like your button link to open in a new window.<\/li>\n
  • <\/i>info<\/strong>: “popover” or “tooltip.”<\/li>\n
  • <\/i>info_place<\/strong>: “top,” “left,” “right,” or “bottom.”<\/li>\n
  • <\/i>info_trigger<\/strong>: “hover,” “click,” or “focus.”<\/li>\n
  • <\/i>info_content<\/strong>: if you have selected a popover, place in your additional content here.<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    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 …<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/285"}],"collection":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":0,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/285\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/media?parent=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}