Tailwind CSS: Create a Floating Action Button (FAB)

Last updated on June 24, 2022 Pennywise Loading... Post a comment

A floating action button (FAB) is usually located in the lower right or left corner of the screen. It has a fixed position and has a larger z-index than other elements of the web page. Therefore, the floating action button always stands out and will be noticed by users more. It is often used to open chat dialogs, contact support, or other important actions, depending on the purpose of each website.

The example below shows you how to create a floating action button with Tailwind CSS.

Example preview:

The code:

<body>
    <!-- Dummy content -->
    <div class="p-10">
        <h1 class="text-4xl italic">KindaCode.com</h1>
        <h3 class="text-xl">Some content here</h3>
    </div>

    <!-- Implement the FAB -->

    <button onclick="buttonHandler()" title="Contact Sale"
        class="fixed z-90 bottom-10 right-8 bg-blue-600 w-20 h-20 rounded-full drop-shadow-lg flex justify-center items-center text-white text-4xl hover:bg-blue-700 hover:drop-shadow-2xl hover:animate-bounce duration-300">&#9993;</button>

    <!-- Javascript code -->
    <script>
        // Do something when the button is clicked
        function buttonHandler() {
            alert('Hi there!');
        }   
    </script>
</body>

That’s it. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

0 Comments

Inline Feedbacks

View all comments

Tailwind CSS: Create a Floating Action Button (FAB)

You May Also Like