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

Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

11 months ago

1.8k
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

1 year ago

1.5k
Primary and secondary button pair
Call to action buttons

Author:
Manuela Bianka

3 years ago

16.2k
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

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

Author:
isaSxm

1 month ago

44
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
Anonymous

1 year ago

12.8k
Componentes para mi empresa
para mi empresa

Author:
BocchiChan

5 months ago

873
Settings Button

Author:
Arya

3 years ago

10.5k
rgb border button

Author:
Akram Khan

1 year ago

1.8k
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Author:
Sedat Kumcu

11 months ago

1.4k
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Author:
Homayoun

1 week ago

31
Material 3 Buttons [Light]
Buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

5 months ago

701

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components