{"id":15812,"date":"2022-07-18T12:29:00","date_gmt":"2022-07-18T10:29:00","guid":{"rendered":"https:\/\/usersnap.com\/?p=15812"},"modified":"2025-04-01T09:43:30","modified_gmt":"2025-04-01T07:43:30","slug":"floating-action-button","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/floating-action-button\/","title":{"rendered":"Floating action buttons in UX design"},"content":{"rendered":"\n<p><strong>Work smarter, not harder<\/strong>\u2014especially when it comes to gathering feedback and improving your product. Enter the <strong>floating action button<\/strong> (FAB), a small but mighty UX element that plays a big role in modern websites and apps.<\/p>\n\n\n\n<p>At Usersnap, we call them <strong>feedback menus<\/strong>\u2014and for good reason. Positioned front and center (often as a circular icon floating above the content), these buttons unlock essential actions: reporting bugs, leaving feedback, accessing help, or navigating to key features.<\/p>\n\n\n\n<p>But their impact isn\u2019t just visual. FABs streamline how users interact with your product across the <strong>Product Development Lifecycle (PDLC)<\/strong>\u2014from discovery and testing to iteration and deployment. By capturing contextual insights exactly when and where they happen, FABs fuel smarter decisions without interrupting the user experience.<\/p>\n\n\n\n<p>In this guide, we\u2019ll explore what floating action buttons are, how they work, and how companies use them to drive continuous improvement.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"894\" height=\"1024\" src=\"https:\/\/ds6br8f5qp1u2.cloudfront.net\/blog\/wp-content\/uploads\/2022\/08\/Frame-25-1-894x1024.jpg?x82505\" alt=\"Example of Usersnap's floating action button, aka the feedback menu\" class=\"wp-image-16091\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Frame-25-1-894x1024.jpg 894w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Frame-25-1-262x300.jpg 262w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Frame-25-1-1341x1536.jpg 1341w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Frame-25-1.jpg 1390w\" sizes=\"(max-width: 894px) 100vw, 894px\" \/><\/figure>\n\n\n\n<p>At <a href=\"https:\/\/usersnap.com\" target=\"_blank\" rel=\"noreferrer noopener\">Usersnap<\/a>, we had the difficulty of naming our floating action button for the specific use case we provide, which is a customer feedback menu. What does this customer feedback menu do? It gives end users multiple feedback options from one button. How did we do this? We asked our customers, tried to drill into the floating action button online literature, and found new ways to improve our floating action button configuration and setup.&nbsp;<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Customizing Your Feedback Widget<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<p>The types of floating action buttons, as well as what they are and how they help digital products get closer to customers and help them (not just for customer feedback), is the topic of this article.<\/p>\n\n\n<div class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" id=\"ub_table-of-contents-3d1fa302-183c-41e8-a3c9-d53d227da16f\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-initiallyhideonmobile=\"false\"\n                    data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\"><div class=\"ub_table-of-contents-header\">\n                    <div class=\"ub_table-of-contents-title\">\ud83d\ude80 What you can expect \u2935\ufe0f \ud83d\udc40<\/div><\/div><\/div><div class=\"ub_table-of-contents-extra-container\"><div class=\"ub_table-of-contents-container ub_table-of-contents-1-column \"><ul><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#0-what-are-floating-action-buttons>What Are Floating Action Buttons?<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#1-why-should-saas-companies-adopt-floating-action-buttons>Why Should SaaS Companies Adopt Floating Action Buttons?<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#7-employing-a-floating-action-button-with-usersnap>Employing a Floating Action Button With Usersnap<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#13-how-to-employ-a-standard-action-menu-component>How to Employ a Standard Action Menu Component<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#14-best-practices-for-a-floating-action-button>Best Practices for a Floating Action Button<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#18-other-examples-of-how-to-use-floating-action-buttons-on-websites>Other Examples of How To Use Floating Action Buttons on Websites<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#36-final-thoughts>Final Thoughts<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#37-frequently-asked-questions>Frequently Asked Questions<\/a><ul><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#38-how-do-you-make-a-floating-action-button>How do you make a floating action button?<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#39-what-is-a-floating-action-button-in-flutter>What is a floating action button in Flutter?<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#40-what-are-floating-icons>What are floating icons?<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#41-where-do-you-put-the-floating-action-button>Where do you put the floating action button?<\/a><\/li><\/ul><\/li><\/ul><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-what-are-floating-action-buttons\">What Are Floating Action Buttons?<\/h2>\n\n\n\n<p>Floating action buttons are UI controls for Android and web-based apps. A floating action button is a tool that allows users to navigate the key parts of an app or website. Usually, floating menu plugins display as a circular icon with the app\u2019s color scheme. Action menus clearly illustrate its action without notifications.<\/p>\n\n\n\n<p>Not every screen needs a floating action button, and companies don\u2019t display more than two <a href=\"https:\/\/design-system.service.gov.uk\/components\/button\/\" target=\"_blank\" rel=\"noreferrer noopener\">buttons<\/a> unless they have separate but equally important actions.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"894\" height=\"1024\" src=\"https:\/\/ds6br8f5qp1u2.cloudfront.net\/blog\/wp-content\/uploads\/2022\/08\/Frame-24-894x1024.jpg?x82505\" alt=\"Examples of floating action buttons \" class=\"wp-image-16093\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Frame-24-894x1024.jpg 894w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Frame-24-262x300.jpg 262w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Frame-24-1341x1536.jpg 1341w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Frame-24.jpg 1390w\" sizes=\"(max-width: 894px) 100vw, 894px\" \/><\/figure>\n\n\n\n<p>Floating action buttons trigger a certain event. Floating action buttons generally avoid destructive actions. In other words, you won\u2019t find a floating action button with a trash icon.&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>Twitter adopted the floating action button in their latest update, according to Luke Wroblewski (@<a href=\"https:\/\/twitter.com\/lukew\/status\/1058052222007697409?lang=en\" target=\"_blank\" rel=\"noreferrer noopener\">LukeW<\/a>). While some think floating menu plugins stick out like a sore thumb (@<a href=\"https:\/\/twitter.com\/dagronf\" target=\"_blank\" rel=\"noreferrer noopener\">dagronf<\/a>), others like how the button expands with more options (@<a href=\"https:\/\/twitter.com\/harshil\" target=\"_blank\" rel=\"noreferrer noopener\">harshil<\/a>).&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-why-should-saas-companies-adopt-floating-action-buttons\">Why Should SaaS Companies Adopt Floating Action Buttons?<\/h2>\n\n\n\n<p>Floating action buttons might seem insignificant. Floating action buttons are small compared to the rest of the website\u2019s functions. However, their effects help users navigate. When implemented correctly, action menus are identifiable, accessible, and customizable.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The shape, position, and color help distinguish action menus above the user interface (UI). The buttons became more popular after Google released material design principles in 2014. Many adopted action menus in web and mobile design, becoming a recognizable part of daily tasks.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The ability for floating menu plugins to expand and animate makes users more engaged to their <a href=\"https:\/\/usersnap.com\/l\/customer-satisfaction-feedback\" target=\"_blank\" rel=\"noreferrer noopener\">satisfaction<\/a>. Floating action buttons aren\u2019t attached to the surface of the UI, meaning they can disappear and reappear during transition or launch. You\u2019ll find action menus on various screens in the same location as long as they\u2019re relevant.&nbsp;<\/p>\n\n\n\n<p>Are you confused? Don\u2019t worry. Let\u2019s dive more into what action menus can do and give more insight into their benefits.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-it-represents-a-hallmark-action\">It represents a hallmark action<\/h3>\n\n\n\n<p>If you\u2019re going to use floating action buttons on your website, carefully consider the design of your app. You have to predict what actions the user might take and represent that in a singular, recognizable icon. At Usersnap for example, our floating action button feedback menu can be fully customized so that it fits the company\u2019s brand (font, colors, size of button, button position, etc.).&nbsp;<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"650\" height=\"555\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-18-at-10.53.11-e1658139340610.png\" alt=\"Usersnap in-product image of a feedback menu template\" class=\"wp-image-15817\"\/><\/figure>\n<\/div>\n\n\n<p>Floating action buttons are for the most frequently used actions or the primary characteristics of the app. Users should be able to successfully and efficiently complete a task using the button without throwing their hands in the air and having a negative experience.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-it%E2%80%99s-a-way-finding-tool\">It\u2019s a way-finding tool<\/h3>\n\n\n\n<p>Floating action buttons guide the way. These buttons are natural cues to tell the users what they should do next. Have you ever encountered an unknown screen before? It\u2019s scary, but you often use feedback menus to navigate since they\u2019re familiar and easy to use and give feedback to the company.<\/p>\n\n\n\n<p>Floating menus are tell-tale signs of what to look for when navigating a different website page. Floating menus guarantee that people who visit won\u2019t feel lost or confused.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-the-floating-action-button-gives-a-set-of-positive-actions\">The floating action button gives a set of positive actions<\/h3>\n\n\n\n<p>Floating action buttons sometimes provide more than one action and spin out to expose other options related to the primary floating action button. You can design them to fit the user\u2019s needs. Don\u2019t go crazy when customizing a floating menu, limiting the separate actions to six. Generally, action menus present three choices.<\/p>\n\n\n\n<p>Factor in the original floating menu and use the revealed actions as independent but still related. You could position any action that isn\u2019t specific to the user into the toolbar to make the design cleaner.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-floating-action-buttons-generate-contextual-awareness\">Floating action buttons generate contextual awareness<\/h3>\n\n\n\n<p>Context is a huge part of user interaction. Depending on your website, some users want to consume content, while others need to perform actions.&nbsp;<\/p>\n\n\n\n<p>Action menus bring out the best of any app, depending on the content. For example, when a user scrolls, the button disappears. When they stop scrolling, they might want to post or complete another action, so the button reappears.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-connects-two-states\">Connects two states<\/h3>\n\n\n\n<p>A floating action button isn\u2019t just a cute little accessory at the bottom of the screen. They can transform based on what the user needs. Floating action buttons morph flawlessly and logically, maintaining the user\u2019s orientation and helping them comprehend the change.&nbsp;<\/p>\n\n\n\n<p>By adjusting the menu actions based on the environment or user context, it offers precise navigation and support for the users. For example, showing FAQ on your marketing website&#8217;s button menu, versus linking the demo videos library in the product. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7-employing-a-floating-action-button-with-usersnap\">Employing a Floating Action Button With Usersnap<\/h2>\n\n\n\n<p>At Usersnap, our floating action button (feedback menu) is used explicitly to give end users options on how they want to give feedback, and our customers the opportunity to connect their toolstack and see the feedback across many teams (product teams, customer success teams, development teams, marketing teams, etc.).<\/p>\n\n\n\n<p>So how does anyone use the feedback menu in Usersnap?&nbsp;<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Customizing Your Feedback Widget<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-step-1-find-feedback-menu-from-the-product-page\">Step 1: find feedback menu from the product page<\/h3>\n\n\n\n<p>It\u2019s that easy. You\u2019ll see it in the dashboard. Click on it, and check out the various templates that will help you navigate to floating menu success.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-18-at-10.57.19-1024x518.png\" alt=\"Usersnap steps to create a floating action button\" class=\"wp-image-15821\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9-step-2-select-the-type-of-floating-menu-you-want\">Step 2: select the type of floating menu you want<\/h3>\n\n\n\n<p>You\u2019ll see that the 3 predefined options we have are related to some use cases. Why? We based this off of customer feedback, hearing from our own users and what feedback menus work for them. With that in mind (and you\u2019ll see this below), you can ALWAYS choose whichever projects you\u2019d like.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"667\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-18-at-11.15.41-1024x667.png\" alt=\"Usersnap floating action button configuration step 2\" class=\"wp-image-15828\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-step-3-link-the-feedback-projects-you-want-to-create-or-build-them-on-the-spot\">Step 3: link the feedback projects you want to create (or build them on the spot!)<\/h3>\n\n\n\n<p>Perhaps you\u2019re looking to get bug reports from your users, or maybe even general satisfaction of your entire website offering. No matter the case, we have more than enough <a href=\"https:\/\/usersnap.com\/templates\" target=\"_blank\" rel=\"noreferrer noopener\">feedback collection templates<\/a> for you to choose from to give your end users choices. This is the beauty of the feedback menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1025\" height=\"559\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-18-at-11.04.18-1-e1658135878138.png\" alt=\"Usersnap floating action button configuration step 3\" class=\"wp-image-15827\"\/><\/figure>\n\n\n\n<p>Say you need to integrate with Zendesk, or perhaps send the feedback directly to Jira or Slack. Sound familiar to you? Well if so, this can be done easily and smoothly. Sure, you\u2019ll need to make sure your <a href=\"https:\/\/usersnap.com\/integrations\" target=\"_blank\" rel=\"noreferrer noopener\">Usersnap integrations<\/a> are set up in advance. After that though, you\u2019ll be able to add exactly what you need to make sure the feedback goes to the right place, right team, and at the right time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-step-4-configure-your-feedback-menu-floating-action-button\">Step 4: configure your feedback menu floating action button<\/h3>\n\n\n\n<p>Customization is queen, king, and royalty. You can adjust the position of the feedback menu options, as well as the overall design, look and feel of the menu. Make it match your company brand (colors, fonts, etc.), and choose the button position you think makes most sense for you. Also an option: target your action menu to particular users at particular points in their journey. Pretty sweet huh?&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/ds6br8f5qp1u2.cloudfront.net\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-22.57.29-1024x637.png?x82505\" alt=\"Usersnap floating action button configuration design step 4\" class=\"wp-image-16097\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-22.57.29-1024x637.png 1024w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-22.57.29-300x187.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-22.57.29-1536x956.png 1536w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-22.57.29.png 1678w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12-step-5-measure-success-are-you-getting-feedback\">Step 5: measure success (are you getting feedback?)<\/h3>\n\n\n\n<p>Let the feedback harvest begin! Your feedback menu should start giving you user insights to improve your website, product, app, and UI. Have a look at what type of feedback you\u2019re getting more of, and use this as an indication to see what your users really want.&nbsp;<\/p>\n\n\n\n<p>Do they prefer talking to a customer success agent, or rather going directly to a bug report? Maybe they want to rate the satisfaction of their experience en masse. No matter the case, use this information to get perspective on what your offering is doing well, and where you can improve<\/p>\n\n\n\n<p>After substantial user research, we needed to make some improvements. The steps above represent the improvements we made:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The flow to create a floating action button feedback menu in Usersnap is now easier than ever.<\/li>\n\n\n\n<li>We added templates to make it super easy to create a feedback menu, based on what our customers do.<\/li>\n\n\n\n<li>Users can directly decide if they want to connect an existing project or have a new one automatically created.<\/li>\n\n\n\n<li>The configuration page is easier to understand and adjust, including moveable user feedback and all settings one the same page.<\/li>\n<\/ol>\n\n\n<div style=\"gap: 20px;\" class=\"align-button-center ub-buttons orientation-button-row 1 wp-block-ub-button\" id=\"ub-button-7802b82b-d5b4-40c3-b854-e3bd79c93bd7\"><div class=\"ub-button-container\">\n\t\t\t<a href=\"https:\/\/app.usersnap.com\/#\/?createProject=GET_HELP_MENU\" target=\"_blank\" rel=\"noopener noreferrer  \" class=\"ub-button-block-main ub-button-medium   ub-button-flex-medium\" role=\"button\" style=\"--ub-button-background-color: #f27b57; --ub-button-color: #ffffff; --ub-button-border: none; --ub-button-hover-background-color: #313131; --ub-button-hover-color: #ffffff; --ub-button-hover-border: none; border-top-left-radius: 10px;; border-top-right-radius: 10px;; border-bottom-left-radius: 10px;; border-bottom-right-radius: 10px;; \">\n\t\t\t\t<div class=\"ub-button-content-holder\" style=\"flex-direction: row\">\n\t\t\t\t\t<span class=\"ub-button-block-btn\">Start a Usersnap feedback menu project now!<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/a>\n\t\t<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"13-how-to-employ-a-standard-action-menu-component\">How to Employ a Standard Action Menu Component<\/h2>\n\n\n<div class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" id=\"ub_table-of-contents-33b46f78-08aa-43e7-9ba9-e0e168577b6e\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-initiallyhideonmobile=\"false\"\n                    data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\"><div class=\"ub_table-of-contents-header\">\n                    <div class=\"ub_table-of-contents-title\">What else we got for you \u2935\ufe0f \ud83d\udc40<\/div><\/div><\/div><div class=\"ub_table-of-contents-extra-container\"><div class=\"ub_table-of-contents-container ub_table-of-contents-1-column \"><ul><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#14-best-practices-for-a-floating-action-button>Best Practices for a Floating Action Button<\/a><ul><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#15-avoid-%E2%80%9Cmystery-meat%E2%80%9D-navigation>Avoid \u201cmystery meat\u201d navigation<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#16-use-only-one-floating-action-button-per-screen>Use only one floating action button per screen<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#17-use-the-floating-menu-for-only-positive-actions>Use the floating menu for only positive actions<\/a><\/li><\/ul><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#18-other-examples-of-how-to-use-floating-action-buttons-on-websites>Other Examples of How To Use Floating Action Buttons on Websites<\/a><ul><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#19-floatton>Floatton<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#20-icon-button>Icon button<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#21-responsive-card>Responsive card<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#22-angularjs-material-floating-action-directive>Angularjs material floating action directive<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#23-full-screen-search-transition>Full-screen search transition<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#24-expando>Expando<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#25-paper-sheet-morphing>Paper sheet morphing<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#26-template-cards>Template cards<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#28-burger-menus>Burger menus<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#29-action-buttons>Action buttons<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#30-multi-button-pure-css>Multi-button pure-CSS<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#31-a-button-with-checkbox-no-jss>A button with checkbox (no-JSS)<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#32-ionic-material-design>Ionic material design<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#33-login-forms>Login forms<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#34-scroll-animation>Scroll animation<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#35-leaflet-material-controls>Leaflet material controls<\/a><\/li><\/ul><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#36-final-thoughts>Final Thoughts<\/a><\/li><li><a href=https:\/\/usersnap.com\/blog\/floating-action-button\/#37-frequently-asked-questions>Frequently Asked Questions<\/a><\/li><\/ul><\/div><\/div><\/div>\n\n\n<p>Firstly, you need to install a floating action button (<strong>npm install @material\/fab<\/strong>). Then, you can dive into basic usages, such as loading material icons via Google Fonts. We won\u2019t confuse you too much, but to summarize, you should look out for the following things.<\/p>\n\n\n\n<p>You can use a floating action button with an HTML structure of either <strong>span<\/strong>,<strong> i<\/strong>, <strong>img<\/strong>, or <strong>svg<\/strong>. These elements are important to include or the icon might not center properly. From there, you can consider the style (<strong>@import &#8220;@material\/fab\/mdc-fab&#8221;;<\/strong>).&nbsp;<\/p>\n\n\n\n<p>Extended action menus must contain an appropriate label. Mixins customize the floating menu further, and you can adjust the color (<strong>mdc-fab-container-color($color)<\/strong>). Position the floating menu in the application design and help your website encourage and promote actions.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>Some specific customizations include:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>mdc-fab: <\/strong>mandatory for the button element<\/li>\n\n\n\n<li><strong>mdc-fab_ _icon<\/strong>: mandatory for the icon element<\/li>\n\n\n\n<li><strong>mdc-fab_ _label: <\/strong>&nbsp;optional, for the text label&nbsp;<\/li>\n\n\n\n<li><strong>mdc-fab&#8211;mini: <\/strong>modifies floating action button to a smaller size<\/li>\n\n\n\n<li><strong>mdc-fab&#8211;extended:<\/strong> modifies to a wider size, includes a text label<\/li>\n\n\n\n<li><strong>mdc-fab&#8211;exited<\/strong>: animates floating action button out of view, returns to view<\/li>\n<\/ul>\n\n\n\n<p>Check out this <a href=\"https:\/\/dev.to\/zachklipp\/introduction-to-the-compose-snapshot-system-19cn\" target=\"_blank\" rel=\"noreferrer noopener\">Introduction to the Compose Snapshot system<\/a> if you have further questions on integrating action menus into your website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"14-best-practices-for-a-floating-action-button\">Best Practices for a Floating Action Button<\/h2>\n\n\n\n<p>Are you thinking of using floating menu plugins for your website or app? Keep reading to see some good habits to make a slick design while avoiding common mistakes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"15-avoid-%E2%80%9Cmystery-meat%E2%80%9D-navigation\">Avoid \u201cmystery meat\u201d navigation<\/h3>\n\n\n\n<p>Don\u2019t you hate when buttons or links don\u2019t explain what they do? Yeah, we do too. Avoid unclear icons when creating action menus. Since you can only use icons, users sometimes don\u2019t understand what they do specifically. <a href=\"http:\/\/uxmyths.com\/post\/715009009\/myth-icons-enhance-usability\" target=\"_blank\" rel=\"noreferrer noopener\">Icons are really hard to understand because they\u2019re so open to interpretation<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/icon-usability\/\" target=\"_blank\" rel=\"noreferrer noopener\">Universally recognized icons are rare<\/a>, and people have to guess what they do, leaving a bad taste in their mouths. Make sure the floating menu plugins on your platform are relevant and understandable.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"16-use-only-one-floating-action-button-per-screen\">Use only one floating action button per screen<\/h3>\n\n\n\n<p>Floating action buttons can distract you due to their design. You should only use one floating menu per page, or not at all. Remember, not every screen needs a floating menu because not every screen has an action.&nbsp;<\/p>\n\n\n\n<p>Choose an appropriate size that distinguishes the button and signals what it does as users browse through the different interfaces without disturbing their experience.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"17-use-the-floating-menu-for-only-positive-actions\">Use the floating menu for only positive actions<\/h3>\n\n\n\n<p>As we mentioned, action menus are for positive actions like creating, sharing, or exploring. Floating action buttons don\u2019t usually have deleting or archiving options.&nbsp;<\/p>\n\n\n\n<p>Remember that feedback menus carry out the representative action. They should be specific and complete. For example, copy and paste would be in a toolbar while posting a message is a floating action button. Users can ask questions on the Usersnap <a href=\"https:\/\/usersnap.com\/l\/feedback-menu-widget\" target=\"_blank\" rel=\"noreferrer noopener\">feedback widget menu<\/a> if they are in doubt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"18-other-examples-of-how-to-use-floating-action-buttons-on-websites\">Other Examples of How To Use Floating Action Buttons on Websites<\/h2>\n\n\n\n<p>You can trigger floating action buttons by simply clicking on them. You enable beautiful animations that display specific actions, and users can share on social media, navigate floating menu buttons, perform downloads, and complete login forms.&nbsp;<\/p>\n\n\n\n<p>Having floating action buttons expands the website functionality without making the UI design too busy. Floating action buttons promote quick access with user-friendly, eye-catching, and engaging designs.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"19-floatton\">Floatton<\/h3>\n\n\n\n<p><a href=\"https:\/\/apps.shopify.com\/floatton\" target=\"_blank\" rel=\"noreferrer noopener\">Floatton<\/a> is an app that helps you create floating link buttons for easy accessibility throughout the website. You can find multiple features that create a responsive and smooth format on any browser or theme. Floatton works for mobile phones and tablets. The app is quick and easy, with no coding required for configuration.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"20-icon-button\">Icon button<\/h3>\n\n\n\n<p>Specific <a href=\"https:\/\/www.w3schools.com\/howto\/howto_css_icon_buttons.asp\" target=\"_blank\" rel=\"noreferrer noopener\">icon buttons<\/a> depend on the selected channel type. Think about it this way: an add button on a blog page would write an article, whereas, for a calendar app, you would add an event.&nbsp;<\/p>\n\n\n\n<p>Add buttons in particular show multiple additional buttons when hovered over. Users can then navigate what their next steps are going to be easily and effectively.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/ds6br8f5qp1u2.cloudfront.net\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-23.09.51-1024x640.png?x82505\" alt=\"Customize floating action button's icons easily with Usersnap\" class=\"wp-image-16098\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-23.09.51-1024x640.png 1024w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-23.09.51-300x188.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-23.09.51-1536x960.png 1536w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-30-at-23.09.51.png 1628w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"21-responsive-card\">Responsive card<\/h3>\n\n\n\n<p><a href=\"https:\/\/getbootstrap.com\/docs\/4.3\/components\/card\/\" target=\"_blank\" rel=\"noreferrer noopener\">Responsive cards<\/a> are flexible and extensive, including options for headers and footers with various content. You have access to contextual background colors and display options.&nbsp;<\/p>\n\n\n\n<p>These cards give more functionality to your website, and you can customize the cards appropriately for better control and support. You can display content such as images, lists, text, and links. Additionally, the cards adapt to the screen size, providing more information.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"22-angularjs-material-floating-action-directive\">Angularjs material floating action directive<\/h3>\n\n\n\n<p>Action buttons have stunning animations like slide-in, fade, and zoom. You can add optional rippling effects, filling them with the accent color or other customizations. The <a href=\"https:\/\/codepen.io\/nobitagit\/pen\/ZYWVKw\" target=\"_blank\" rel=\"noreferrer noopener\">Angularjs material floating action directive<\/a> accomplishes just that.<\/p>\n\n\n\n<p>You have more accessibility, and users find these options useful. You can better express your website and stand out from the crowd.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"23-full-screen-search-transition\">Full-screen search transition<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.codingnepalweb.com\/full-screen-search-bar-animation-html-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Full-screen search<\/a> is helpful to display, you guessed it, the full-screen search. The transition is smooth, well-designed, and accessible. Users can interact with the search function more frequently, and you&#8217;ll see higher <a href=\"https:\/\/usersnap.com\/l\/customer-satisfaction-feedback\" target=\"_blank\" rel=\"noreferrer noopener\">customer satisfaction<\/a> with increased page views.<\/p>\n\n\n\n<p>The design works on all platforms and devices. Those who prefer to search using small, mobile devices will have better accessibility.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"24-expando\">Expando<\/h3>\n\n\n\n<p><a href=\"https:\/\/github.com\/jxjj\/expando-button-plugin\" target=\"_blank\" rel=\"noreferrer noopener\">Expando<\/a> is a great button that has helpful utilities. Once clicked, it displays a new window that you can use for other functions, encouraging the user to take more critical actions.&nbsp;<\/p>\n\n\n\n<p>Other action buttons pop up, corresponding to what the user might want to do next in the process. What does that mean? You\u2019ll get happier customers who stay on your website longer.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"25-paper-sheet-morphing\">Paper sheet morphing<\/h3>\n\n\n\n<p>Action menus quickly integrate into designs with neat animations. You can convert buttons into part of the format, extending from the entire screen. You can switch, reverse, or transform new sheets of material into action menus. This is how <a href=\"https:\/\/codepen.io\/equinusocio\/pen\/RNaBwd\" target=\"_blank\" rel=\"noreferrer noopener\">paper sheet morphing<\/a> functions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"26-template-cards\">Template cards<\/h3>\n\n\n\n<p>Feedback menus give <a href=\"https:\/\/uxdesign.cc\/designing-cards-for-beginners-9ed9454d27f6\" target=\"_blank\" rel=\"noreferrer noopener\">new card templates<\/a> with every click, and you can add new elements to the design. It\u2019s a convenient way to display content, and each card has different features, making it well-suited for presenting similar objects.&nbsp;<\/p>\n\n\n\n<p>The size and supported actions can vary, and you can post photos with captions. A basic card or image card conveys small bits of info, so you don&#8217;t scare away potential customers.&nbsp;<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Customizing Your Feedback Widget<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"27-card-%E2%80%93-for-blog-post-articles\">Card \u2013 for blog post articles<\/h4>\n\n\n\n<p>Wait, aren\u2019t these the same as responsive cards? Not quite. While responsive cards provide information in an approachable way, cards for blog posts allow users to share the content on social media networks like Facebook, Twitter, and Google.&nbsp;<\/p>\n\n\n\n<p>Having a floating menu on WordPress, for example, ensures that your writing gets out there. Additionally, it makes the blog posts easier to share with other people who might not stumble across the information.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"176\" height=\"372\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-18-at-12.16.49.png\" alt=\"Usersnap share buttons on the blog\" class=\"wp-image-15833\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-18-at-12.16.49.png 176w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-18-at-12.16.49-142x300.png 142w\" sizes=\"(max-width: 176px) 100vw, 176px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"28-burger-menus\">Burger menus<\/h3>\n\n\n\n<p>Burger menus don\u2019t list delicious sandwiches and French fries but rather are popular features on websites and mobile apps. <a href=\"https:\/\/www.invisionapp.com\/inside-design\/pros-and-cons-of-hamburger-menus\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hamburger menus<\/a> open with a triggered animation to reveal a navigation menu.&nbsp;<\/p>\n\n\n\n<p>You can see an action menu as a stack of three horizontal lines that resemble, yep, a burger. Burger menus have various pros and cons, but floating menu plugins are good alternatives for a website or mobile design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"29-action-buttons\">Action buttons<\/h3>\n\n\n\n<p>Floating <a href=\"https:\/\/spectrum.adobe.com\/page\/action-button\/\" target=\"_blank\" rel=\"noreferrer noopener\">action buttons<\/a> vary with different designs and animations. You can visually differentiate the primary and secondary options on buttons. Action buttons aren\u2019t links, but the primary source that advocates the user to complete a certain action.&nbsp;<\/p>\n\n\n\n<p>Consider the placement and make the icon simple without any confusion. We all make mistakes, so allow the users to recover from accidents, such as making edits before finalizing.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"30-multi-button-pure-css\">Multi-button pure-CSS<\/h3>\n\n\n\n<p>You can use a floating action button with <a href=\"https:\/\/codepen.io\/micpurr\/pen\/gOaOmOq\" target=\"_blank\" rel=\"noreferrer noopener\">CSS for social media sharing<\/a>. These complex buttons display four additional buttons that lead to various networks.&nbsp;<\/p>\n\n\n\n<p>This allows you to organize your webpage with one parent button and other baby buttons. Consider the labels and confirm that users will know exactly what actions they should take next.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"31-a-button-with-checkbox-no-jss\">A button with checkbox (no-JSS)<\/h3>\n\n\n\n<p>Floating action buttons add unique functions to your website without making the format too overwhelming. You can enable the buttons to show up when you need them, then hide them when they\u2019re not necessary for the current screen.<\/p>\n\n\n\n<p>With the checkbox trick, you can toggle the button on and off. You have more customization, and users won\u2019t be as annoyed when they want to focus on a task and not the floating action button in the right-hand corner.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"32-ionic-material-design\">Ionic material design<\/h3>\n\n\n\n<p>Feedback menus have multiple designs that correspond to various functions that improve the entire experience. You can adjust the buttons for specific tasks such as storage, sharing, social connection, advertising, and notifications.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>While these depend on your website and product, any business owner would love to know that they have more control over the buttons.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"33-login-forms\">Login forms<\/h3>\n\n\n\n<p>Floating menu plugins make <a href=\"https:\/\/www.codinglabweb.com\/2020\/12\/login-form-with-floating-label.html\" target=\"_blank\" rel=\"noreferrer noopener\">login pages<\/a> more unique. These buttons can help you successfully log in or register to an application in a more user-friendly approach.&nbsp;<\/p>\n\n\n\n<p>New users will appreciate the little nudge for certain tasks without having to navigate themselves if they\u2019re unfamiliar with the process.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"34-scroll-animation\">Scroll animation<\/h3>\n\n\n\n<p>You can alter action menus to either add a <a href=\"https:\/\/alvarotrigo.com\/blog\/css-animations-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">scrolling animation effect<\/a> to projects or have the button disappear entirely. Websites and apps can easily overwhelm us with bright colors and countless notifications. Floating action buttons allow us to focus on one task at a time, without needing to post or purchase something specific.&nbsp;<\/p>\n\n\n\n<p>It\u2019s best to encourage the user to act when they\u2019re ready without constantly reminding them of the presence of an action button.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"35-leaflet-material-controls\">Leaflet material controls<\/h3>\n\n\n\n<p>Floating action buttons help you navigate a map with excellent actions that help you quickly go through controls, especially with <a href=\"https:\/\/www.npmjs.com\/package\/leaflet-material-controls\" target=\"_blank\" rel=\"noreferrer noopener\">leaflet material controls<\/a>. These are easy to use and make your life a little bit easier, which we can all agree is a nice feature. You can zoom in and mark specific locations while keeping track of specific information.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"36-final-thoughts\">Final Thoughts<\/h2>\n\n\n\n<p>Floating action buttons help your website look more organized. Users can easily gauge what their next action should be through recognizable prompts.&nbsp;<\/p>\n\n\n\n<p>Customer satisfaction will improve, and your website will be more user-friendly after implementing the feedback menus with Usersnap.<\/p>\n\n\n<div style=\"gap: 20px;\" class=\"align-button-center ub-buttons orientation-button-row 1 wp-block-ub-button\" id=\"ub-button-75d234bf-9560-4700-a364-daeceb97c4ad\"><div class=\"ub-button-container\">\n\t\t\t<a href=\"https:\/\/usersnap.com\/signup\" target=\"_blank\" rel=\"noopener noreferrer  \" class=\"ub-button-block-main ub-button-medium   ub-button-flex-medium\" role=\"button\" style=\"--ub-button-background-color: #3329f5; --ub-button-color: #ffffff; --ub-button-border: none; --ub-button-hover-background-color: #313131; --ub-button-hover-color: #ffffff; --ub-button-hover-border: none; border-top-left-radius: 10px;; border-top-right-radius: 10px;; border-bottom-left-radius: 10px;; border-bottom-right-radius: 10px;; \">\n\t\t\t\t<div class=\"ub-button-content-holder\" style=\"flex-direction: row\">\n\t\t\t\t\t<span class=\"ub-button-block-btn\">Sign up with Usersnap now!<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/a>\n\t\t<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"37-frequently-asked-questions\">Frequently Asked Questions<\/h2>\n\n\n\n<p>Here are a few frequently asked questions regarding floating action buttons.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"38-how-do-you-make-a-floating-action-button\">How do you make a floating action button?<\/h3>\n\n\n\n<p>A floating action button needs a specific code and layout file. You can color a floating action button by customizing the theme\u2019s color palette. Additionally, using XML attributes or corresponding methods can adjust the size, ripple effect, floating action button icon, and how it responds to button taps.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"39-what-is-a-floating-action-button-in-flutter\">What is a floating action button in Flutter?<\/h3>\n\n\n\n<p>A floating action button in Flutter carries the same qualities as what we\u2019ve established. A floating action button is a circular icon button that hovers over content to promote a primary action to the user with one button per screen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"40-what-are-floating-icons\">What are floating icons?<\/h3>\n\n\n\n<p>Floating icons represent the primary action of the app. You can use floating icons to promote specific functions. Most of the time, floating icons are circles that float above the UI, changing color and spinning out upon selection with more related options.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Customizing Your Feedback Widget<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"41-where-do-you-put-the-floating-action-button\">Where do you put the floating action button?<\/h3>\n\n\n\n<p>Floating action buttons are designed to be flexible\u2014but their placement still matters.<\/p>\n\n\n\n<p>Depending on your audience and the reading direction of your interface (left-to-right or right-to-left), FABs are typically anchored to the <strong>bottom right<\/strong>, <strong>bottom left<\/strong>, or <strong>center bottom<\/strong> of the screen.<\/p>\n\n\n\n<p>Their design can adapt to the context. For instance, FABs can <strong>transform from an extended layout with text to a compact icon-only version<\/strong> when space is limited. You can also customize the <strong>font, color, and shape<\/strong> to match your branding or accessibility needs.<\/p>\n\n\n\n<p>The key is to keep them visible, intuitive, and non-intrusive\u2014so they empower users without disrupting their journey.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Work smarter, not harder\u2014especially when it comes to gathering feedback and improving your product. Enter the floating action button (FAB), a small but mighty UX element that plays a big role in modern websites and apps. At Usersnap, we call them feedback menus\u2014and for good reason. Positioned front and center (often as a circular icon [&hellip;]<\/p>\n","protected":false},"author":55,"featured_media":15831,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[841,806],"tags":[1054,1065,1074,1055,1127,1085,1086,1066,1124,1052,1063],"class_list":["post-15812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customer-feedback-ultimate-blog","category-customer-support-blog","tag-customer-feedback","tag-customer-feedback-collection","tag-customer-feedback-form","tag-customer-feedback-tool","tag-customer-feedback-tools","tag-customer-support","tag-customer-support-tool","tag-in-app-feedback","tag-in-product-feedback","tag-product-management","tag-user-feedback"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png","author_info":{"display_name":"Will Perlmutter","author_link":"https:\/\/usersnap.com\/blog\/author\/william-perlmutter\/"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Floating action buttons: The best SaaS guide to date<\/title>\n<meta name=\"description\" content=\"Learn how to use the floating action button to help your digital product improve for your users. + learn about the new Usersnap feedback menu\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/usersnap.com\/blog\/floating-action-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Floating action buttons: The best SaaS guide to date\" \/>\n<meta property=\"og:description\" content=\"Learn how to use the floating action button to help your digital product improve for your users. + learn about the new Usersnap feedback menu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/floating-action-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Usersnap Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/usersnap\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-18T10:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-01T07:43:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Will Perlmutter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@usersnap\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Will Perlmutter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/\"},\"author\":{\"name\":\"Will Perlmutter\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/7ee9c92d591a0ea2b1ec2dac98decc4e\"},\"headline\":\"Floating action buttons in UX design\",\"datePublished\":\"2022-07-18T10:29:00+00:00\",\"dateModified\":\"2025-04-01T07:43:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/\"},\"wordCount\":3688,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png\",\"keywords\":[\"customer feedback\",\"customer feedback collection\",\"customer feedback form\",\"customer feedback tool\",\"customer feedback tools\",\"customer support\",\"customer support tool\",\"in-app feedback\",\"in-product feedback\",\"product management\",\"user feedback\"],\"articleSection\":[\"Customer Feedback &amp; Experience\",\"Customer Support\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/\",\"url\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/\",\"name\":\"Floating action buttons: The best SaaS guide to date\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png\",\"datePublished\":\"2022-07-18T10:29:00+00:00\",\"dateModified\":\"2025-04-01T07:43:30+00:00\",\"description\":\"Learn how to use the floating action button to help your digital product improve for your users. + learn about the new Usersnap feedback menu\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/floating-action-button\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/floating-action-button\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png\",\"width\":1200,\"height\":630},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/usersnap.com\/blog\/#website\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"name\":\"Usersnap Blog\",\"description\":\"Learn more about how to collect user feedback and build better products with the magic power of feedback.\",\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/usersnap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\",\"name\":\"Usersnap\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"contentUrl\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"width\":136,\"height\":26,\"caption\":\"Usersnap\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/usersnap\",\"https:\/\/x.com\/usersnap\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/7ee9c92d591a0ea2b1ec2dac98decc4e\",\"name\":\"Will Perlmutter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ce30ad0f81652da26ad82a741e88d8a560c2c49dcde4cfc141ff607720db2e6a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ce30ad0f81652da26ad82a741e88d8a560c2c49dcde4cfc141ff607720db2e6a?s=96&d=mm&r=g\",\"caption\":\"Will Perlmutter\"},\"sameAs\":[\"https:\/\/usersnap.com\/\"],\"url\":\"https:\/\/usersnap.com\/blog\/author\/william-perlmutter\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Floating action buttons: The best SaaS guide to date","description":"Learn how to use the floating action button to help your digital product improve for your users. + learn about the new Usersnap feedback menu","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/usersnap.com\/blog\/floating-action-button\/","og_locale":"en_US","og_type":"article","og_title":"Floating action buttons: The best SaaS guide to date","og_description":"Learn how to use the floating action button to help your digital product improve for your users. + learn about the new Usersnap feedback menu","og_url":"https:\/\/usersnap.com\/blog\/floating-action-button\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2022-07-18T10:29:00+00:00","article_modified_time":"2025-04-01T07:43:30+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png","type":"image\/png"}],"author":"Will Perlmutter","twitter_card":"summary_large_image","twitter_creator":"@usersnap","twitter_site":"@usersnap","twitter_misc":{"Written by":"Will Perlmutter","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/floating-action-button\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/floating-action-button\/"},"author":{"name":"Will Perlmutter","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/7ee9c92d591a0ea2b1ec2dac98decc4e"},"headline":"Floating action buttons in UX design","datePublished":"2022-07-18T10:29:00+00:00","dateModified":"2025-04-01T07:43:30+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/floating-action-button\/"},"wordCount":3688,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/floating-action-button\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png","keywords":["customer feedback","customer feedback collection","customer feedback form","customer feedback tool","customer feedback tools","customer support","customer support tool","in-app feedback","in-product feedback","product management","user feedback"],"articleSection":["Customer Feedback &amp; Experience","Customer Support"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/floating-action-button\/","url":"https:\/\/usersnap.com\/blog\/floating-action-button\/","name":"Floating action buttons: The best SaaS guide to date","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/floating-action-button\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/floating-action-button\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png","datePublished":"2022-07-18T10:29:00+00:00","dateModified":"2025-04-01T07:43:30+00:00","description":"Learn how to use the floating action button to help your digital product improve for your users. + learn about the new Usersnap feedback menu","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/floating-action-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/floating-action-button\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2022\/07\/The-best-B2B-SaaS-tutorial-on-floating-action-buttons.png","width":1200,"height":630},{"@type":"WebSite","@id":"https:\/\/usersnap.com\/blog\/#website","url":"https:\/\/usersnap.com\/blog\/","name":"Usersnap Blog","description":"Learn more about how to collect user feedback and build better products with the magic power of feedback.","publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/usersnap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/usersnap.com\/blog\/#organization","name":"Usersnap","url":"https:\/\/usersnap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","contentUrl":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","width":136,"height":26,"caption":"Usersnap"},"image":{"@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/usersnap","https:\/\/x.com\/usersnap"]},{"@type":"Person","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/7ee9c92d591a0ea2b1ec2dac98decc4e","name":"Will Perlmutter","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ce30ad0f81652da26ad82a741e88d8a560c2c49dcde4cfc141ff607720db2e6a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ce30ad0f81652da26ad82a741e88d8a560c2c49dcde4cfc141ff607720db2e6a?s=96&d=mm&r=g","caption":"Will Perlmutter"},"sameAs":["https:\/\/usersnap.com\/"],"url":"https:\/\/usersnap.com\/blog\/author\/william-perlmutter\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/15812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=15812"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/15812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/15831"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=15812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=15812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=15812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}