Tailwind Button Glow

tailwind-button-glow.html

<!-- Tailwind Play: https://play.tailwindcss.com/0kpNOOXVtR?layout=horizontal -->
<div class="flex h-screen">
  <div class="flex basis-1/3 items-center justify-center bg-black">
    <button class="rounded-full bg-gradient-to-br from-gray-100/10 px-6 py-2 text-sm font-light text-white shadow-in ring-1 ring-inset ring-gray-500/30 drop-shadow-dark-lg backdrop-blur-sm transition-all duration-200 hover:to-gray-200/5 hover:shadow-in-reverse">Climbs</button>
  </div>

  <div class="flex basis-1/3 items-center justify-center space-x-7 bg-slate-50">
    <button class="rounded-full bg-gradient-to-br from-white px-6 py-2 text-sm font-light shadow-inner ring-1 ring-inset ring-gray-500/30 drop-shadow-lg backdrop-blur-sm transition-all duration-200 hover:to-white/5 hover:shadow-inner-reverse hover:ring-gray-300/50">Climbs</button>
  </div>

  <div class="flex basis-1/3 items-center justify-center space-x-7 bg-[url('https://images.unsplash.com/photo-1455612693675-112974d4880b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')]">
    <button class="rounded-full bg-gradient-to-br from-white px-6 py-2 text-sm font-light shadow-inner ring-1 ring-inset ring-gray-500/30 drop-shadow-lg backdrop-blur-sm transition-all duration-200 hover:to-white/5 hover:shadow-inner-reverse hover:ring-gray-300/50">Climbs</button>
  </div>
</div>

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
      boxShadow: {
        in: 'inset 0    1px  0   0 rgb(250 250 250 / .2)',
        'in-reverse': 'inset 1px  1px  0   0 rgb(250 250 250 / .2)',
        'inner-reverse': 'inset 1px  2px  0   0 rgb(250 250 250)',
      },
    },
  },
  plugins: [],
}