Home
Iris Callahan
Primary secondary button pair

Primary secondary button pair

This tailwind example is contributed by Iris Callahan, on 25-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button

Author Iris Callahan

Fork Fullscreen

<div class="flex gap-2 my-4 w-fit xs:gap-4">
  <button class="w-full bg-gradient-to-b from-sky-300 to-sky-600 rounded-full shadow-md shadow-black/50 hover:outline hover:outline-sky-500 focus:outline focus:outline-sky-500 transition-all duration-100 active:from-black active:to-zinc-800 active:translate-y-px" id="video-play-button">
    <div class="font-medium text-white bg-gradient-to-b from-sky-500 to-blue-600 rounded-full border-t border-t-sky-300 group-active:border-t-black group-active:shadow-inner pb-1 pt-0.5 px-4 relative">
      <div class="flex items-center justify-center gap-1 text-lg transition">
        <svg viewBox="0 0 24 24" data-icon="fe:play" height="20" width="20" class="translate-y-px">
          <symbol id="ai:fe:play">
            <path d="M6 5.912c0-.155.037-.307.107-.443c.23-.44.75-.599 1.163-.354l10.29 6.088c.14.083.255.206.332.355c.23.44.08.995-.332 1.239L7.27 18.885a.814.814 0 0 1-.415.115C6.383 19 6 18.592 6 18.089z" fill="currentColor"></path>
          </symbol>
          <use xlink:href="#ai:fe:play"></use>
        </svg>
        <span class="text-base py-0.5">Demo video</span>
      </div>
    </div>
  </button>
  
  <a href="/" class="bg-gradient-to-b from-zinc-700 to-black rounded-full shadow-md shadow-black/50 hover:outline hover:outline-sky-500 transition-all duration-100 active:from-black active:to-zinc-800 active:translate-y-px inline-block w-fit">
    <div class="font-medium text-white bg-gradient-to-b from-zinc-800 to-zinc-900 rounded-full border-t border-t-zinc-700 group-active:border-t-black group-active:shadow-inner pb-1 pt-0.5 px-4 relative">
      <div class="flex items-center gap-1 whitespace-nowrap transition">
        Preview
        <svg viewBox="0 0 24 24" data-icon="tabler:arrow-right" height="16" width="16">
          <symbol id="ai:tabler:arrow-right">
            <path d="M5 12h14m-6 6l6-6m-6-6l6 6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
          </symbol>
          <use xlink:href="#ai:tabler:arrow-right"></use>
        </svg>
      </div>
    </div>
  </a>
</div>

Related Examples