buttons group

some attractive button group on different varients primary, outlined and link button

This tailwind example is contributed by Akram Khan, on 08-Oct-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Button Button Group

Author Akram Khan

Tailwind v3.4 2.5k 10

Fork Fullscreen

<div class="min-h-screen p-8 bg-gradient-to-br from-teal-50 to-teal-100 dark:from-teal-900 dark:to-teal-950">
    
    <div class="mb-8">
      <h2 class="text-xl font-semibold text-teal-900 dark:text-teal-100 mb-4">Filled Buttons</h2>
      <div class="flex flex-wrap gap-4">
        
        <button class="
          px-6 py-2.5 
          bg-teal-500/80 
          backdrop-blur-sm
          text-white font-medium
          rounded-lg
          shadow-[4px_4px_10px_0px_rgba(0,0,0,0.1),-4px_-4px_10px_0px_rgba(255,255,255,0.95)]
          dark:shadow-[4px_4px_10px_0px_rgba(0,0,0,0.3),-4px_-4px_10px_0px_rgba(255,255,255,0.1)]
          hover:bg-teal-600/80 
          hover:shadow-[6px_6px_12px_0px_rgba(0,0,0,0.15),-6px_-6px_12px_0px_rgba(255,255,255,0.95)]
          active:shadow-[inset_4px_4px_10px_0px_rgba(0,0,0,0.2),inset_-4px_-4px_10px_0px_rgba(255,255,255,0.1)]
          active:transform active:scale-95
          transition-all duration-300 ease-out
          hover:animate-[pulse-ring_1.5s_cubic-bezier(0.4,0,0.6,1)_infinite]
        ">
          Neomorphic Filled
        </button>

<button class="
          relative
          px-6 py-2.5
          bg-teal-400/30
          backdrop-blur-md
          border border-white/30
          text-teal-950 dark:text-white
          font-medium
          rounded-lg
          shadow-lg
          overflow-hidden
          hover:bg-teal-400/40
          hover:shadow-xl
          active:transform active:scale-95
          transition-all duration-300
          before:content-['']
          before:absolute
          before:top-0
          before:left-0
          before:w-full
          before:h-full
          before:bg-gradient-to-r
          before:from-transparent
          before:via-white/20
          before:to-transparent
          before:-translate-x-full
          hover:before:translate-x-full
          before:transition-transform
          before:duration-700
        ">
          Glass Filled
        </button>
      </div>
    </div>

<div class="mb-8">
      <h2 class="text-xl font-semibold text-teal-900 dark:text-teal-100 mb-4">Outlined Buttons</h2>
      <div class="flex flex-wrap gap-4">
        
        <button class="
          px-6 py-2.5
          bg-transparent
          border-2 border-teal-500
          text-teal-700 dark:text-teal-300
          font-medium
          rounded-lg
          shadow-[4px_4px_10px_0px_rgba(0,0,0,0.1),-4px_-4px_10px_0px_rgba(255,255,255,0.95)]
          dark:shadow-[4px_4px_10px_0px_rgba(0,0,0,0.3),-4px_-4px_10px_0px_rgba(255,255,255,0.1)]
          hover:bg-teal-500/10
          hover:shadow-[6px_6px_12px_0px_rgba(0,0,0,0.15),-6px_-6px_12px_0px_rgba(255,255,255,0.95)]
          active:shadow-[inset_4px_4px_10px_0px_rgba(0,0,0,0.2),inset_-4px_-4px_10px_0px_rgba(255,255,255,0.1)]
          active:transform active:scale-95
          transition-all duration-300
        ">
          Neomorphic Outlined
        </button>

<button class="
          relative
          px-6 py-2.5
          bg-transparent
          backdrop-blur-sm
          border-2 border-teal-400/50
          text-teal-700 dark:text-teal-300
          font-medium
          rounded-lg
          overflow-hidden
          hover:border-teal-400
          hover:bg-teal-400/10
          active:transform active:scale-95
          transition-all duration-300
          before:content-['']
          before:absolute
          before:top-0
          before:left-0
          before:w-full
          before:h-full
          before:bg-gradient-to-r
          before:from-transparent
          before:via-white/20
          before:to-transparent
          before:-translate-x-full
          hover:before:translate-x-full
          before:transition-transform
          before:duration-700
        ">
          Glass Outlined
        </button>
      </div>
    </div>

<div class="mb-8">
      <h2 class="text-xl font-semibold text-teal-900 dark:text-teal-100 mb-4">Link Buttons</h2>
      <div class="flex flex-wrap gap-4">
        
        <button class="
          group
          px-4 py-1
          text-teal-600 dark:text-teal-300
          font-medium
          relative
          overflow-hidden
          hover:text-teal-800 dark:hover:text-teal-100
          transition-colors duration-300
          after:content-['']
          after:absolute
          after:w-full
          after:h-0.5
          after:bg-teal-500
          after:left-0
          after:bottom-0
          after:transform
          after:scale-x-0
          after:origin-right
          hover:after:scale-x-100
          hover:after:origin-left
          after:transition-transform
          after:duration-300
        ">
          Animated Link
        </button>

<button class="
          relative
          px-4 py-1
          text-teal-700 dark:text-teal-200
          font-medium
          backdrop-blur-sm
          rounded
          overflow-hidden
          hover:bg-teal-400/10
          active:transform active:scale-95
          transition-all duration-300
          before:content-['']
          before:absolute
          before:top-0
          before:left-0
          before:w-full
          before:h-full
          before:bg-gradient-to-r
          before:from-transparent
          before:via-white/20
          before:to-transparent
          before:-translate-x-full
          hover:before:translate-x-full
          before:transition-transform
          before:duration-700
        ">
          Glass Link
        </button>
      </div>
    </div>
  </div>
</body>