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

8.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

2 years ago

13.7k
Buttons with shadow

Author:
Leon Bachmann

2 years ago

11.2k
Buttons popup on hover
Popup buttons on hover

Author:
Sophia Baker

2 years ago

13.4k
Buttons variations

Author:
R.P Ketan

2 years ago

9.4k
Simple Pagination

Author:
Manuela Bianka

2 years ago

11.3k
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

4 weeks ago

220
Underline Hover Effect
Hover effect using after and before pseudo elements.

Author:
Carlos Adrian Garcia

1 year ago

7.9k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

1 year ago

19k
Elegant Buttons
Useful Tailwind classes for creating several types of basic buttons.

Author:
Nick Girga

1 month ago

206
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.6k
Linkedin login/signup button

Author:
Shakti

2 years ago

12.7k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

6 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components