{"id":1,"date":"2020-10-30T13:03:44","date_gmt":"2020-10-30T13:03:44","guid":{"rendered":"https:\/\/wow-company.com\/templatemonster\/?p=1"},"modified":"2020-10-30T13:39:43","modified_gmt":"2020-10-30T13:39:43","slug":"floating-buttons","status":"publish","type":"post","link":"https:\/\/wow-company.com\/templatemonster\/css\/floating-buttons\/","title":{"rendered":"Floating Action Buttons &#8211; Pure CSS3"},"content":{"rendered":"\n<section class=\"section is-medium\" id=\"demo\">\n    <div class=\"container\">\n        <div class=\"block has-text-centered ds-title\">\n            <h3 class=\"title is-2\">\n                Live Demo\n            <\/h3>\n            <p class=\"subtitle is-spaced\">Try to change options and see the result<\/p>\n            <p class=\"subtitle has-text-danger is-7\">These are not all settings. The item has many more flexible display\n                settings.<\/p>\n        <\/div>\n\n        <div class=\"columns is-multiline has-shadow \">\n            <div class=\"column\">\n                <div class=\"field\">\n                    <label class=\"label\">Position<\/label>\n                    <div class=\"control has-icons-left\">\n                    <span class=\"select is-medium is-primary is-fullwidth\">\n                        <select id=\"position\" class=\"options is-radiusless\">\n                            <option value=\"flBtn-position-br\">bottom-right<\/option>\n                            <option value=\"flBtn-position-bl\">bottom-left<\/option>\n                            <option value=\"flBtn-position-b\">bottom-center<\/option>\n                            <option value=\"flBtn-position-tr\">top-right<\/option>\n                            <option value=\"flBtn-position-tl\">top-left<\/option>\n                            <option value=\"flBtn-position-t\">top-center<\/option>\n                            <option value=\"flBtn-position-l\">left<\/option>\n                            <option value=\"flBtn-position-r\" selected=\"\">right<\/option>\n                        <\/select>\n\t\t\t\t\t\t<\/span>\n                        <span class=\"icon is-small is-left has-text-grey-lighter\">\n\t\t\t\t\t  <i class=\"far fa-arrows\"><\/i>\n\t\t\t\t\t<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"column\">\n                <div class=\"field\">\n                    <label class=\"label\">Shapes<\/label>\n                    <div class=\"control has-icons-left\">\n                    <span class=\"select is-medium is-primary is-fullwidth\">\n                        <select id=\"shape\" class=\"options is-radiusless\">\n                            <option value=\"flBtn-shape-circle\" selected=\"\">Circle<\/option>\n                            <option value=\"flBtn-shape-ellipse\">Ellipse<\/option>\n                            <option value=\"flBtn-shape-square\">Square<\/option>\n                            <option value=\"flBtn-shape-rsquare\">Rounded square<\/option>\n                        <\/select>\n                    <\/span>\n                        <span class=\"icon is-small is-left has-text-grey-lighter\">\n\t\t\t\t\t  <i class=\"far fa-shapes\"><\/i>\n\t\t\t\t\t<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"column\">\n                <div class=\"field\">\n                    <label class=\"label\">Size<\/label>\n                    <div class=\"control has-icons-left\">\n                    <span class=\"select is-medium is-primary is-fullwidth\">\n                        <select id=\"size\" class=\"options is-radiusless\">\n                            <option value=\"flBtn-size-small\">Small<\/option>\n                            <option value=\"flBtn-size-medium\" selected=\"\">Medium<\/option>\n                            <option value=\"flBtn-size-large\">Large<\/option>\n                        <\/select>\n                    <\/span>\n                        <span class=\"icon is-small is-left has-text-grey-lighter\">\n\t\t\t\t\t  <i class=\"far fa-text-height\"><\/i>\n\t\t\t\t\t<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column\">\n                <div class=\"field\">\n                    <label class=\"label\">Animation<\/label>\n                    <div class=\"control has-icons-left\">\n                    <span class=\"select is-medium is-primary is-fullwidth\">\n                        <select id=\"animation\" class=\"options is-radiusless\">\n                            <option value=\"\" selected=\"\">Fade<\/option>\n                            <option value=\"flBtn-effect-rotate\">Rotate<\/option>\n                            <option value=\"flBtn-effect-scale\">Scale<\/option>\n                            <option value=\"flBtn-effect-rotate-scale\">Rotate and Scale<\/option>\n                            <option value=\"flBtn-effect-translate\">Translate<\/option>\n                            <option value=\"flBtn-effect-rotate-translate\">Translate Rotate<\/option>\n                            <option value=\"flBtn-effect-rotate-translate-scale\">Rotate Translate Scale<\/option>\n                            <option value=\"flBtn-effect-translate-scale\">Translate Scale<\/option>\n                        <\/select>\n                    <\/span>\n                        <span class=\"icon is-small is-left has-text-grey-lighter\">\n\t\t\t\t\t  <i class=\"far fa-swatchbook\"><\/i>\n\t\t\t\t\t<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<section class=\"section has-background-light is-medium\" id=\"features\">\n    <div class=\"container\">\n        <div class=\"block has-text-centered ds-title\">\n            <p class=\"subtitle is-5 is-uppercase has-text-danger\">what you get<\/p>\n            <h3 class=\"title is-2\">\n                Awesome Features\n            <\/h3>\n        <\/div>\n        <div class=\"columns is-multiline is-variable is-3 feature-boxes\">\n\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered feature-box is-radiusless\">\n                    <div class=\"icon is-large has-text-grey\">\n                        <i class=\"far fa-swatchbook fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Beautiful Animations<\/p>\n                        <p class=\"has-text-left\">8 animations for showing sub buttons and 11 animations for the main button<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-flag fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">1500+ Icons<\/p>\n                        <p class=\"has-text-left\">The current version of the plugin has 1500+ Font Awesome Icon.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-shapes fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">4 Different Shapes<\/p>\n                        <p class=\"has-text-left\">Choose different types of shapes for the menu: Square, Round, Rounded, Rounded-out.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>           \n            \n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-text-height fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">3 Size<\/p>\n                        <p class=\"has-text-left\">Set the 3 size for buttons: small, medium, large .<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-arrows fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Different Positions<\/p>\n                        <p class=\"has-text-left\">8 different Positions<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-globe fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Cross-Browser<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-code fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">W3C Valid Code<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-file-edit fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Well Documented<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"fas fa-repeat-alt fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5\">Lifetime Free Updates<\/p>\n                        <p class=\"has-text-left\">Never pay for an update.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile is-one-quarter-desktop is-half-tablet \">\n                <div class=\"box has-text-centered has-text-grey feature-box is-radiusless\">\n                    <div class=\"icon is-large\">\n                        <i class=\"far fa-headset fa-3x\"><\/i>\n                    <\/div>\n                    <div class=\"content\">\n                        <p class=\"title is-5 \">Fast Support<\/p>\n                        <p class=\"has-text-left\">We work closely with the user community and listen to your opinion. We provide free technical\n                            and\n                            information support for customers.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<section class=\"section is-medium\" id=\"examples\">\n    <div class=\"container\">\n        <div class=\"block has-text-centered ds-title\">\n            <p class=\"subtitle is-5 is-uppercase has-text-danger\">how it helps<\/p>\n            <h3 class=\"title is-1\">\n                Examples in Screenshots\n            <\/h3>\n        <\/div>\n        <div class=\"columns is-multiline is-variable is-3 feature-boxes\">\n            <div class=\"column is-full-mobile  is-one-third-desktop is-half-tablet \">\n                <div class=\"card\">\n                    <div class=\"card-image\">\n                        <figure class=\"image is-5by3\">\n                            <a data-fslightbox=\"gallery\" href=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-contacts.jpg\">\n                                <img decoding=\"async\" src=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-contacts.jpg\" alt=\"Floating Button Pro - Contact\">\n                            <\/a>\n                        <\/figure>\n                    <\/div>\n                    <div class=\"card-content has-text-centered\">\n                        <p class=\"title is-4\">Contacts<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile  is-one-third-desktop is-half-tablet \">\n                <div class=\"card\">\n                    <div class=\"card-image\">\n                        <figure class=\"image is-5by3\">\n                            <a data-fslightbox=\"gallery\" href=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-menu-example.jpg\">\n                                <img decoding=\"async\" src=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-menu-example.jpg\" alt=\"Floating Button Pro - Menu\">\n                            <\/a>\n                        <\/figure>\n                    <\/div>\n                    <div class=\"card-content has-text-centered\">\n                        <p class=\"title is-4\">Navigation Menu<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile  is-one-third-desktop is-half-tablet \">\n                <div class=\"card\">\n                    <div class=\"card-image\">\n                        <figure class=\"image is-5by3\">\n                            <a data-fslightbox=\"gallery\" href=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-profile.jpg\">\n                                <img decoding=\"async\" src=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-profile.jpg\" alt=\"Floating Button Pro - Profile\">\n                            <\/a>\n                        <\/figure>\n                    <\/div>\n                    <div class=\"card-content has-text-centered\">\n                        <p class=\"title is-4\">Profile Menu<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile  is-one-third-desktop is-half-tablet \">\n                <div class=\"card\">\n                    <div class=\"card-image\">\n                        <figure class=\"image is-5by3\">\n                            <a data-fslightbox=\"gallery\" href=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-share.jpg\">\n                                <img decoding=\"async\" src=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-share.jpg\" alt=\"Floating Button Pro - Share\">\n                            <\/a>\n                        <\/figure>\n                    <\/div>\n                    <div class=\"card-content has-text-centered\">\n                        <p class=\"title is-4\">Share<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile  is-one-third-desktop is-half-tablet \">\n                <div class=\"card\">\n                    <div class=\"card-image\">\n                        <figure class=\"image is-5by3\">\n                            <a data-fslightbox=\"gallery\" href=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-player.jpg\">\n                                <img decoding=\"async\" src=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-player.jpg\" alt=\"Floating Button Pro - Player\">\n                            <\/a>\n                        <\/figure>\n                    <\/div>\n                    <div class=\"card-content has-text-centered\">\n                        <p class=\"title is-4\">Player<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"column is-full-mobile  is-one-third-desktop is-half-tablet \">\n                <div class=\"card\">\n                    <div class=\"card-image\">\n                        <figure class=\"image is-5by3\">\n                            <a data-fslightbox=\"gallery\" href=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-skype.jpg\">\n                                <img decoding=\"async\" src=\"https:\/\/wow-company.com\/envato\/wp-content\/uploads\/sites\/15\/2020\/09\/float-button-skype.jpg\" alt=\"Floating Button Pro - Skype\">\n                            <\/a>\n                        <\/figure>\n                    <\/div>\n                    <div class=\"card-content has-text-centered\">\n                        <p class=\"title is-4\">Skype Menu<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/section>\n<div id=\"result\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Easily create a floating button with any functions<\/p>\n","protected":false},"author":1,"featured_media":8,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/posts\/1"}],"collection":[{"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":4,"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/posts\/1\/revisions\/11"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/media\/8"}],"wp:attachment":[{"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wow-company.com\/templatemonster\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}