Floating Action Button (FAB) Template

Provide users with constant access to a primary action using this elegant floating button.

This button stays in a fixed position as the user scrolls, making it an excellent choice for actions like creating a new item, composing a message, or starting a chat.

Get Source Code Preview

About the Floating Action Button

The Floating Action Button (FAB) is a UI pattern popularized by Google's Material Design. It's a circular, icon-only button that "floats" above the main content of the page, typically anchored to a corner. Its purpose is to present a promoted, primary action in a way that is immediately accessible, regardless of where the user is on the page. This template is particularly effective on mobile interfaces where space is at a premium.

Features

Fixed Positioning: Uses position: fixed to ensure the button is always visible in the same spot on the screen.
Floating Effect: A carefully crafted box-shadow makes the button appear to be levitating over the page content.
Essential for Accessibility: Since the button has no visible text, it includes a descriptive aria-label to announce its function to screen reader users.
Pure CSS and HTML: The entire component is built without any JavaScript, making it fast and simple to integrate.
Interactive Feedback: A subtle animation on hover lifts the button and enhances its shadow, providing a satisfying micro-interaction.

Code Breakdown

The CSS uses position: fixed combined with the bottom and right properties to lock the button to the bottom-right corner. A high z-index value ensures it stays above other content. The circular shape is created with a border-radius: 50%. Inside the button, Flexbox is used to perfectly center the SVG icon.

Code

Here is the complete, self-contained code for the Floating Action Button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Action Button (FAB)</title>
    <style>
        /*
         Component: Floating Action Button (FAB)
         Description: A fixed-position button for primary actions.
        */
        :root {
            --fab-size: 56px;
            --fab-bg: #ef4444; /* A bright, action-oriented color */
            --fab-bg-hover: #dc2626;
            --fab-icon-color: #ffffff;
            --fab-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
            --fab-shadow-hover: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.2);
            --fab-focus-outline: #ef4444;
        }

body {
            /* Example content to demonstrate scrolling */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
            margin: 0;
            padding: 1rem;
            min-height: 200vh; /* Make body long enough to scroll */
        }

h1, p {
            max-width: 600px;
            margin: 1rem auto;
        }

/* --- FAB Styles --- */
        .fab-btn-1 {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;

display: flex;
            align-items: center;
            justify-content: center;

width: var(--fab-size);
            height: var(--fab-size);
            border-radius: 50%;
            border: none;
            
            background-color: var(--fab-bg);
            color: var(--fab-icon-color);
            box-shadow: var(--fab-shadow);
            
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

.fab-btn-1 svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

.fab-btn-1:hover {
            background-color: var(--fab-bg-hover);
            transform: translateY(-4px);
            box-shadow: var(--fab-shadow-hover);
        }

.fab-btn-1:active {
            transform: translateY(0);
        }

.fab-btn-1:focus-visible {
            outline: 3px solid var(--fab-focus-outline);
            outline-offset: 3px;
        }

/* For smaller screens */
        @media (max-width: 600px) {
            :root {
                --fab-size: 50px;
            }
            .fab-btn-1 {
                bottom: 1.5rem;
                right: 1.5rem;
            }
        }

</style>
</head>
<body>

<h1>Scroll Down to See the Effect</h1>
    <p>The Floating Action Button (FAB) remains in the bottom-right corner of the viewport, regardless of how far you scroll down the page. This makes it instantly accessible for important, frequent actions.</p>
    <p>This pattern is especially useful on mobile devices, where navigating back to a header or toolbar can be cumbersome. The FAB ensures the primary action is always just a tap away.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <button class="fab-btn-1" type="button" aria-label="Create new item">
        
        <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
    </button>

</body>
</html>

View Output