Floating buttons examples

Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

This tailwind example is contributed by Livia Flores, on 05-Apr-2023. Component is made with Tailwind v3.4. It is responsive.

Button

Author Livia Flores

Tailwind v3.4 26.4k 17

Fork Fullscreen

<div class="fixed bottom-4 right-4">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg">
    Feedback
  </button>
</div>

<div class="fixed bottom-4 left-4">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg">
    Feedback
  </button>
</div>

<div class="fixed top-4 right-4">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg">
    Feedback
  </button>
</div>

<div class="fixed top-4 left-4">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg">
    Feedback
  </button>
</div>

<div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg">
    Feedback
  </button>
</div>

<div class="fixed bottom-4 left-1/2 transform -translate-x-1/2">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg">
    Feedback
  </button>
</div>