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

710

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

Tab Menu
Tab menu

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

5.5k
Glowing gradient button
Button on black background

Author:
Leon Bachmann

2 years ago

36.1k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

38.5k
Sign in with buttons

Author:
Simon Scheffer

2 years ago

10.7k
Button with shadow

Author:
Laurits

2 years ago

11.9k
Glowing gradient button
Button on black background

Author:
Md. Abu Taher

1 year ago

11.6k
Payment Button

Author:
Md. Tofayel islam

1 year ago

2.7k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

4 months ago

182
button animation
button animation big

Author:
QQ-VVN

1 month ago

168
Contact Spinner
Contact button spinning

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.9k
Sign in with boogle button

Author:
Conan Hilton

2 years ago

10k
Buy Me a Coffee CTA section

Author:
Sienna

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components