Home
Livia Flores
Floating buttons examples

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 CSS v3. It is responsive.

Button

Author Livia Flores

23.7k

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>

Related Examples