{"id":90,"date":"2013-08-11T19:54:47","date_gmt":"2013-08-11T19:54:47","guid":{"rendered":"http:\/\/localhost:8888\/test\/?page_id=538"},"modified":"2024-11-13T22:34:18","modified_gmt":"2024-11-13T19:34:18","slug":"buttons","status":"publish","type":"page","link":"https:\/\/maviates.net\/en\/elements\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n  <div class=\"banner has-hover\" id=\"banner-1670673748\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"650\" src=\"https:\/\/maviates.net\/wp-content\/uploads\/2016\/08\/dummy-2.jpg\" class=\"bg attachment-large size-large\" alt=\"\" \/>                        <div class=\"overlay\"><\/div>            \n                    <\/div>\n\t\t\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-136766907\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text-box-content text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h1>Buttons<\/h1>\n<p class=\"lead\">Create beautiful Call to Action buttons with the amazing Button Element<\/p>\n<a href=\"http:\/\/test?asdf&#038;asdf=asdf&#038;asdf&#038;\" class=\"button primary is-shade\"  >\n\t\t<span>Primary Button<\/span>\n\t<\/a>\n\n              <\/div>\n           <\/div>\n                            \n<style>\n#text-box-136766907 {\n  width: 76%;\n}\n#text-box-136766907 .text-box-content {\n  font-size: 100%;\n}\n<\/style>\n    <\/div>\n \n        <\/div>\n      <\/div>\n\n            \n<style>\n#banner-1670673748 {\n  padding-top: 500px;\n}\n#banner-1670673748 .overlay {\n  background-color: rgba(0, 0, 0, 0.49);\n}\n<\/style>\n  <\/div>\n\n\n<div class=\"row\"  id=\"row-345280541\">\n\n\t<div id=\"col-683701333\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Unlimited Variations<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat&#8230;.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1345112032\" class=\"col medium-9 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<a class=\"button primary\"  >\n\t\t<span>Primary Color<\/span>\n\t<\/a>\n\n<a class=\"button secondary\"  style=\"border-radius:12px;\">\n\t\t<span>Secondary Color<\/span>\n\t<\/a>\n\n<a class=\"button alert\"  >\n\t\t<span>Alert Color<\/span>\n\t<i class=\"icon-heart\" aria-hidden=\"true\" ><\/i><\/a>\n\n<a class=\"button success\"  >\n\t\t<span>Success Color<\/span>\n\t<\/a>\n\n<a class=\"button white\"  >\n\t\t<span>White Color<\/span>\n\t<\/a>\n\n<a class=\"button primary is-outline\"  >\n\t\t<span>Primary Color<\/span>\n\t<\/a>\n\n<a class=\"button success is-outline\"  style=\"border-radius:99px;\">\n\t\t<span>Success Color<\/span>\n\t<\/a>\n\n<a class=\"button alert is-outline reveal-icon\"  style=\"border-radius:6px;\">\n\t\t<span>Alert Color<\/span>\n\t<i class=\"icon-heart\" aria-hidden=\"true\" ><\/i><\/a>\n\n<a class=\"button secondary is-outline\"  >\n\t\t<span>Secondary Color<\/span>\n\t<\/a>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n\n\t<section class=\"section dark\" id=\"section_854184569\">\n\t\t<div class=\"section-bg fill\" >\n\t\t\t\t\t\t\t\t\t\n\t\t\t\n\n\t\t<\/div>\n\n\t\t\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n<div class=\"row\"  id=\"row-501415881\">\n\n\t<div id=\"col-16847992\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Buttons on Dark background<\/h3>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1970557271\" class=\"col medium-9 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<a class=\"button primary\"  >\n\t\t<span>Primary Color<\/span>\n\t<\/a>\n\n<a class=\"button secondary\"  >\n\t\t<span>Secondary Color<\/span>\n\t<\/a>\n\n<a class=\"button alert\"  >\n\t\t<span>Alert Color<\/span>\n\t<\/a>\n\n<a class=\"button success\"  >\n\t\t<span>Success Color<\/span>\n\t<\/a>\n\n<a class=\"button white\"  >\n\t\t<span>White Color<\/span>\n\t<\/a>\n\n<a class=\"button primary is-outline\"  >\n\t\t<span>Primary Color<\/span>\n\t<\/a>\n\n<a class=\"button success is-outline\"  >\n\t\t<span>Success Color<\/span>\n\t<\/a>\n\n<a class=\"button alert is-outline\"  >\n\t\t<span>Alert Color<\/span>\n\t<\/a>\n\n<a class=\"button secondary is-outline\"  >\n\t\t<span>Secondary Color<\/span>\n\t<\/a>\n\n<a class=\"button white is-outline\"  >\n\t\t<span>White outline<\/span>\n\t<\/a>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n\t\t<\/div>\n\n\t\t\n<style>\n#section_854184569 {\n  padding-top: 30px;\n  padding-bottom: 30px;\n  background-color: rgb(44, 44, 44);\n}\n<\/style>\n\t<\/section>\n\t\n<div class=\"row\"  id=\"row-1401642157\">\n\n\t<div id=\"col-90124068\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Button\u00a0Styles<\/h3>\n<p>Select between many different button styles.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1110217039\" class=\"col medium-9 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<a class=\"button primary is-link\"  >\n\t\t<span>Simple link<\/span>\n\t<\/a>\n\n<a class=\"button primary is-underline\"  >\n\t\t<span>Underline<\/span>\n\t<\/a>\n\n<a class=\"button primary is-outline box-shadow-2 box-shadow-2-hover\"  >\n\t\t<span>Outline<\/span>\n\t<\/a>\n\n<a class=\"button primary box-shadow-2 box-shadow-5-hover\"  >\n\t\t<span>Normal<\/span>\n\t<\/a>\n\n<a class=\"button primary is-gloss box-shadow-2 box-shadow-5-hover\"  style=\"border-radius:99px;\">\n\t\t<span>Gloss<\/span>\n\t<\/a>\n\n<a class=\"button primary is-shade box-shadow-2 box-shadow-5-hover\"  style=\"border-radius:7px;\">\n\t\t<span>Shade<\/span>\n\t<\/a>\n\n<a class=\"button primary is-bevel box-shadow-2 box-shadow-5-hover\"  style=\"border-radius:12px;\">\n\t\t<span>Bevel<\/span>\n\t<\/a>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<div class=\"row\"  id=\"row-924782580\">\n\n\t<div id=\"col-1196495079\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Button with\u00a0icon<\/h3>\n<p>Choose between many included Flatsome Icons.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1050739142\" class=\"col medium-9 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<a class=\"button primary is-bevel\"  style=\"border-radius:8px;\">\n\t<i class=\"icon-twitter\" aria-hidden=\"true\" ><\/i>\t<span>Icon Button<\/span>\n\t<\/a>\n\n<a class=\"button primary is-outline\"  style=\"border-radius:6px;\">\n\t\t<span>Icon Left<\/span>\n\t<i class=\"icon-instagram\" aria-hidden=\"true\" ><\/i><\/a>\n\n<a class=\"button primary is-outline reveal-icon\"  >\n\t<i class=\"icon-play\" aria-hidden=\"true\" ><\/i>\t<span>Reveal Left<\/span>\n\t<\/a>\n\n<a class=\"button primary reveal-icon\"  >\n\t\t<span>Reveal Right<\/span>\n\t<i class=\"icon-angle-right\" aria-hidden=\"true\" ><\/i><\/a>\n\n<a class=\"button primary is-bevel is-xlarge\"  style=\"border-radius:8px;\">\n\t<i class=\"icon-twitter\" aria-hidden=\"true\" ><\/i>\t<span>Large Button<\/span>\n\t<\/a>\n\n<a class=\"button primary is-bevel is-xlarge reveal-icon\"  style=\"border-radius:8px;\">\n\t<i class=\"icon-checkmark\" aria-hidden=\"true\" ><\/i>\t<span>Large Reveal<\/span>\n\t<\/a>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<div class=\"row\"  id=\"row-94291572\">\n\n\t<div id=\"col-1123141249\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Simple Button Styles<\/h3>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-191874416\" class=\"col medium-9 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<a class=\"button primary is-link reveal-icon\"  >\n\t\t<span>Primary Color<\/span>\n\t<i class=\"icon-play\" aria-hidden=\"true\" ><\/i><\/a>\n\n<a class=\"button secondary is-link\"  >\n\t\t<span>Secondary Color<\/span>\n\t<\/a>\n\n<a class=\"button success is-link\"  >\n\t\t<span>Success Color<\/span>\n\t<\/a>\n\n<a class=\"button alert is-link\"  >\n\t\t<span>Alert Color<\/span>\n\t<\/a>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<div class=\"row\"  id=\"row-1773538545\">\n\n\t<div id=\"col-1332435394\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Button Radius<\/h3>\n<p>Add custom radius to buttons<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-409924693\" class=\"col medium-9 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<a class=\"button primary is-large\"  >\n\t\t<span>Normal Button<\/span>\n\t<\/a>\n\n<a class=\"button primary is-large\"  style=\"border-radius:10px;\">\n\t\t<span>Round Button<\/span>\n\t<\/a>\n\n<a class=\"button primary is-large\"  style=\"border-radius:99px;\">\n\t\t<span>Circle Button<\/span>\n\t<\/a>\n\n<a class=\"button primary is-outline is-large\"  >\n\t\t<span>Normal Button<\/span>\n\t<\/a>\n\n<a class=\"button primary is-outline is-large\"  style=\"border-radius:10px;\">\n\t\t<span>Round Button<\/span>\n\t<\/a>\n\n<a class=\"button primary is-outline is-large\"  style=\"border-radius:99px;\">\n\t\t<span>Circle Button<\/span>\n\t<\/a>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<div class=\"row\"  id=\"row-1947127054\">\n\n\t<div id=\"col-1020068151\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Button\u00a0Shadow<\/h3>\n<p>Add drop shadow to buttons to make them stand out more.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-709560526\" class=\"col medium-9 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<a class=\"button primary is-bevel is-large box-shadow-5 box-shadow-4-hover\"  >\n\t\t<span>Large Shadow<\/span>\n\t<\/a>\n\n<a class=\"button primary is-bevel is-large box-shadow-3 box-shadow-4-hover\"  >\n\t\t<span>Medium Shadow<\/span>\n\t<\/a>\n\n<a class=\"button primary is-bevel is-large box-shadow-1 box-shadow-2-hover\"  >\n\t\t<span>Small Shadow<\/span>\n\t<\/a>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<div class=\"row\"  id=\"row-1916147542\">\n\n\t<div id=\"col-1749424785\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Button\u00a0Sizes<\/h3>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-714413692\" class=\"col medium-9 large-9\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<a class=\"button primary is-xsmall\"  >\n\t\t<span>x Small<\/span>\n\t<\/a>\n\n<a class=\"button primary is-smaller\"  >\n\t\t<span>Smaller<\/span>\n\t<\/a>\n\n<a class=\"button primary is-small\"  >\n\t\t<span>Small<\/span>\n\t<\/a>\n\n<a class=\"button primary\"  >\n\t\t<span>Normal<\/span>\n\t<\/a>\n\n<a class=\"button primary is-large\"  >\n\t\t<span>Large<\/span>\n\t<\/a>\n\n<a class=\"button primary is-larger\"  >\n\t\t<span>Larger<\/span>\n\t<\/a>\n\n<a class=\"button primary is-xlarge\"  >\n\t\t<span>X LARGE<\/span>\n\t<\/a>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<div class=\"row\"  id=\"row-56496468\">\n\n\t<div id=\"col-582726146\" class=\"col medium-3 large-3\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h3>Smart Links<\/h3>\n<p>Add simple text to button links to link to various WordPress and WooCommerce pages.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-456108304\" class=\"col medium-4 large-4\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>&#8216;<strong>shop<\/strong>&#8216; : Goes to Shop page<\/p>\n<p>&#8216;<strong>account&#8217;<\/strong> Goes to My Account Page<\/p>\n<p>&#8216;<strong>checkout&#8217;<\/strong> Goes to Checkout page<\/p>\n<p>&#8216;<strong>blog&#8217;<\/strong> Goes to blog page<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1778201898\" class=\"col medium-4 small-12 large-4\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>&#8216;<strong>home<\/strong>&#8216; Goes to homepage<\/p>\n<p><strong>&#8216;wishlist<\/strong>&#8216; Goes to wishlist page<\/p>\n<p>&#8216;<strong>Page Title<\/strong>&#8216; Goes to page by Title.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Buttons Create beautiful Call to Action buttons with the amazing Button Element Primary Button Unlimited Variations Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat&#8230;. Primary Color Secondary Color Alert Color Success Color White Color Primary Color Success Color Alert Color Secondary Color [&#8230;]\n","protected":false},"author":1,"featured_media":19,"parent":100,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-90","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/pages\/90\/revisions\/154"}],"up":[{"embeddable":true,"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/pages\/100"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/media\/19"}],"wp:attachment":[{"href":"https:\/\/maviates.net\/en\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}