Primary secondary button pair

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

Button

Author Iris Callahan

Tailwind v3.4 2.2k 2

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

Gradient Button
instagram: ferdiisahin

Anonymous

2 years ago

2.4k
Interactive "Morphing" Play/Pause Button

Anonymous

1 year ago

2.4k
beautiful buttons set
a beautofull buttons set like primary, outline and text.

Akram Khan

1 year ago

2.1k
Switch tabs button

gmer33

3 years ago

17.3k
Button pair

Piet Vriend

3 years ago

11.7k
Buuton
Logout button

Arjun Kumar

6 months ago

263
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Arnav K

2 years ago

6.1k
Previous Next Buttons
Pagination buttons

Alok

4 years ago

15.4k
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Krishna Gudpalle

4 years ago

21.1k
Social buttons
Mono-color Social buttons change colors according to your need

Arya

3 years ago

12.4k
Button
Button

Arjun Kumar

6 months ago

626
Old style Button Designs

Amit Pachange

3 years ago

11k