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.1k 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

Buttons with border bottom

Prashant

4 years ago

13.7k
Sign in with GitHub Button

Conan Hilton

4 years ago

17.3k
Button with hover effect
Button with light hover effect, responsive and suitable for light/dark mode.

isaSxm

1 year ago

890
Lots of button examples
tailwind button examples

QQ-VVN

1 year ago

1.2k
tooltip Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Disabled Button & Active Button

Dipti narayan

3 years ago

38.4k
modern portifolio
by salvator

Baraka Salvator

1 year ago

1.1k
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

UI-Templates

11 months ago

1.1k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
Animated Button
on hover show icon

Lautaro Gómez

2 years ago

3.2k
Confirm and cancel buttons

Samuel Dawson

3 years ago

17k
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.

Shakti

3 years ago

41.6k