Home
Hyun-woo Cho
Call to action buttons

Call to action buttons

Pair of active primary and secondary buttons.
Elevated buttons w/ border bottom

This tailwind example is contributed by Hyun-woo Cho, on 08-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button

Author Hyun-woo Cho

9.8k

Fork Fullscreen

<div class="flex h-12 justify-center gap-x-6 dark:text-white">
    <a class="group flex h-min items-center disabled:opacity-50 disabled:hover:opacity-50 hover:opacity-95 justify-center ring-none rounded-lg shadow-lg font-semibold py-2 px-4 font-dm focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 bg-violet-500 border-b-violet-700 disabled:border-0 disabled:bg-violet-500 disabled:text-white ring-white text-white border-b-4 hover:border-0 active:border-0 hover:text-gray-100 active:bg-violet-800 active:text-gray-300 focus-visible:outline-violet-500 text-sm sm:text-base dark:bg-gray-700 dark:border-gray-700 dark:border-b-gray-900"
        href="">
        Create demos for free
    </a>
    <a class="group flex h-min ring-none items-center justify-center hover:opacity-95 disabled:opacity-50 rounded-lg py-2 px-4 font-dm focus:outline-none !ring-transparent text-violet-800 border border-violet-500 border-b-violet-400 border-b-4 hover:border active:border bg-white hover:text-violet-900 hover:bg-gray-50 active:bg-gray-100 active:text-violet-600 focus-visible:outline-violet-600 focus-visible:ring-violet-700 text-sm sm:text-base dark:bg-gray-700 dark:border-gray-700 dark:border-b-gray-900 dark:text-white"
        href="">
        <svg aria-hidden="true" class="h-3 w-3 flex-none fill-violet-600 group-active:fill-current">
            <path
                d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z">
            </path>
        </svg>
        <span class="ml-3">Watch demo</span>
    </a>
</div>

Related Examples

Elevated buttons

Author:
Leon Bachmann

3 years ago

14.5k
Buttons with shadow

Author:
Leon Bachmann

3 years ago

12.2k
Buttons popup on hover
Popup buttons on hover

Author:
Sophia Baker

3 years ago

14.5k
Buttons variations

Author:
R.P Ketan

2 years ago

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

Author:
sachin senal

1 year ago

1.2k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

3 years ago

9.7k
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

1 month ago

137
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

2.9k
Premium Button Collection with 12 Unique Animations
Collection de 12 boutons premium avec animations uniques : glow, shine, slide, 3D push, neon pulse, glassmorphism, gradient border et plus. Chaque bouton a son propre effet hover. 100% Tailwind CSS, no JavaScript.

Author:
Dolbymat

2 months ago

298
Buttons set
buttons sets of, primary, outlined, text and link

Author:
Akram Khan

1 year ago

1.8k
Continue with Google button
Login with google button for social login.

Author:
S. Patel

2 years ago

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

Author:
Nick Girga

8 months ago

957

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components