How to Create Floating Button in Tailwind CSS?

Last Updated : 07 Oct, 2024

A floating button is a popular UI design feature used to quickly access actions like adding, saving, or navigating to website users. We can easily create a floating button in Tailwind CSS. Tailwind CSS makes it very easy to create a floating button with its utility-first approach, which allows us to style elements directly in your HTML without needing to write custom CSS.

A floating button is a button that stays fixed in a specific position, mainly it is present at the bottom-right corner of the screen, even when the user scrolls the page. It is commonly used in web apps or mobile interfaces to trigger actions like adding a new item, creating a post, or moving to another page.

Prerequisites

Step-By-Step Implementation

Step 1: Create a New Project Folder

First we will create a folder named floating-button-project on our computer system. Inside this folder, we will store all our project files like HTML, CSS, and JavaScript.

Step 2: Install Node.js and npm

This step is important as we will set up Tailwind CSS in .
Download Node.js from the official website. After installation:

Open your terminal/command prompt and run the following command to check if Node.js and npm are successfully installed:

node -v
npm -v

Step 3: Initialize a New Project

This is only required when we want to manage dependencies using npm. Now we open a terminal and navigate to your project folder:

cd path-to-your/floating-button

Now, we run the following command:

npm init -y

This creates a package.json file to manage your project dependencies.

Step 4: Install Tailwind CSS

Install Tailwind CSS using npm:

npm install -D tailwindcss

Initializes a Tailwind CSS configuration file (tailwind.config.js) in the root of our project:

npx tailwindcss init

This will create a tailwind.config.js file in our project folder. It allows us to configure and customize Tailwind CSS.

Step 5: Set Up Tailwind CSS

Inside our floating-button-project folder, create a file called styles.css.

Open styles.css and add these lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

Package.json File:

{
  "name": "floating-button",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "tailwindcss": "^3.4.13"
  }
}

Project Structure:

Now we open our terminal and navigate to the project folder. We run the following command:

npx tailwindcss -i ./styles.css -o ./output.css --watch

This watches for changes in styles.css and updates output.css accordingly.

Step 6: Create an HTML File

Inside our project folder, we will create an index.html file and update tailwind.config.js:

HTML

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Enhanced Floating Button</title>
    <link rel="stylesheet" href="output.css">
 <!-- Link the compiled Tailwind CSS file -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Link Font Awesome for icons -->
    <style>
        /* Custom Bounce Animation */
        .bounce {
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-15px);
            }

            60% {
                transform: translateY(-7px);
            }
        }

        /* Tooltip Styling */
        .tooltip {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 100%;
            /* Position the tooltip above the button */
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* Show Tooltip on Hover */
        .floating-btn:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body class="bg-gray-100 dark:bg-gray-900
             transition-colors duration-500">

    <!-- Floating Button with Tooltip -->
    <div class="fixed bottom-4 right-4 floating-btn">
        <button class="bg-blue-500 hover:bg-blue-600
                       text-white font-bold py-3 px-4
                       rounded-full shadow-lg hover:shadow-xl
                       transition duration-300 ease-in-out
                       transform hover:scale-110 bounce relative">
            <i class="fas fa-plus text-lg"></i>
            <!-- Font Awesome icon -->
        </button>
        <!-- Tooltip -->
        <span class="tooltip">
            Add Item
        </span>
    </div>

    <!-- Theme Toggle Button -->
    <div class="fixed top-4 right-4">
        <button id="theme-toggle" 
        class="bg-gray-800 text-white px-4 py-2 rounded-lg
               dark:bg-gray-200 dark:text-black transition duration-300">
            Toggle Theme
        </button>
    </div>

    <!-- Script for Theme Toggle -->
    <script>
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;

        // Toggle between light and dark mode
        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark');
        });
    </script>

</body>

</html>

CSS

/*tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./index.html",  
        // Ensure your HTML file is included
        "./src/**/*.{html,js}", 
        // Include all HTML and JS files in src folder if applicable
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 7: Run the Project

Now, open the index.html file in a browser to see your floating button and theme toggle functionality. Save all the changes to see the output.

Output: Now, we open the index.html file in your browser to see the floating button in action.

Conclusion

We follow the given steps above to run the floating button project with Tailwind CSS. We can either use the local setup (via npm) for full control over the tailwind CSS. We can see the output of following code of a floating button in right-down corner point.

How to Create Floating Label in Tailwind CSS?

rekhamiseswt

Improve

Article Tags :