Sharp corner button design

button with hover effect

This tailwind example is contributed by Amit Pachange, on 21-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Button Hover Button Group

Author Amit Pachange

Tailwind v3.4 13.4k 13

Fork Fullscreen

<div class="max-w-lg mx-auto flex flex-col justify-center items-center gap-4 sm:flex-row md:mt-8 lg:mt-10">
    <a class="group relative inline-flex border border-red-500 focus:outline-none w-full sm:w-auto" href="/docs">
        <span class="w-full inline-flex items-center justify-center self-stretch px-4 py-2 text-sm text-white text-center font-bold uppercase bg-red-500 ring-1 ring-red-500 ring-offset-1 ring-offset-red-500 transform transition-transform group-hover:-translate-y-1 group-hover:-translate-x-1 group-focus:-translate-y-1 group-focus:-translate-x-1">
        Get Started
    </span>
    </a>
    <a class="group relative inline-flex border border-red-600 focus:outline-none w-full sm:w-auto"
        href="" target="_blank">
        <span class="w-full inline-flex items-center justify-center self-stretch px-4 py-2 text-sm text-red-600 text-center font-bold uppercase bg-white ring-1 ring-red-600 ring-offset-1 transform transition-transform group-hover:-translate-y-1 group-hover:-translate-x-1 group-focus:-translate-y-1 group-focus:-translate-x-1">Watch Videos</span>
    </a>
</div>