Glowing Background Gradient Effects Using Tailwind UI

Elevate your user experience with captivating buttons featuring a glowing background gradient effect skillfully crafted using Tailwind CSS.
other
Loading component...
index.html
56 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  .body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>

<div class="min-h-screen px-16 py-32 bg-black">
  <div class="grid gap-32 items-start justify-center">
    <div class="relative group">
      <div
        class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-pink-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-800 group-hover:duration-200 animate-tilt">
      </div>
      <button class="relative px-7 py-4 bg-black rounded-lg leading-none flex items-center space-x-5">
        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
          <g clip-path="url(#prefix__clip0)">
            <path fill="#ffff" fill-rule="evenodd"
              d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
              clip-rule="evenodd" />
          </g>
          <defs>
            <clipPath id="prefix__clip0">
              <path fill="#fff" d="M0 0h54v32.4H0z" />
            </clipPath>
          </defs>
        </svg>
        <span class="text-blue-200 group-hover:text-white transition duration-200">Get Started with Tailwind CSS</span>
      </button>
    </div>
    <div class="relative group">
      <div
        class="absolute -inset-4 bg-gradient-to-r from-blue-600 to-pink-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-800 group-hover:duration-200 animate-tilt">
      </div>
      <button class="relative px-7 py-4 bg-black rounded-lg leading-none flex items-center space-x-5">
        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
          <g clip-path="url(#prefix__clip0)">
            <path fill="#ffff" fill-rule="evenodd"
              d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
              clip-rule="evenodd" />
          </g>
          <defs>
            <clipPath id="prefix__clip0">
              <path fill="#fff" d="M0 0h54v32.4H0z" />
            </clipPath>
          </defs>
        </svg>
        <span class="text-blue-200 group-hover:text-white transition duration-200">Get Started with Tailwind CSS</span>
      </button>
    </div>
  </div>
</div>
Glowing Background Gradient Effects Using Tailwind UI

Preview - Glowing Background Gradient Effects Using Tailwind UI
