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>