Corner‑Framed Hover Transition Buttons

Minimal CTA buttons featuring animated corner shapes and smooth width transitions on hover, built with Tailwind CSS for a sharp, modern UI.

This tailwind example is contributed by Arshid Iqbal, on 13-Aug-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Transitions

Button Hover Animation

Author Arshid Iqbal

Tailwind v3.4 23 1

Fork Fullscreen

<div class="flex items-center justify-center text-zinc-800 min-h-dvh bg-zinc-900  p-4 ">

<div class="flex flex-col gap-2  w-full  max-w-100">

<a href="#"
      class="flex w-full self-center relative py-3 px-8 bg-orange-500/10 items-center justify-center hover:w-[90%] transition-all duration-500 ease-in  text-zinc-200 border border-orange-500/10 ">
      <div
        class="size-4 aspect-square outline-0 border-transparent absolute top-0 left-0  border-l-orange-400 border-t-orange-400 border">
      </div>

<div
        class="size-4 aspect-square outline-0 border-transparent absolute top-0 right-0  border-r-orange-400 border-t-orange-400 border">
      </div>

VISIT

<div
        class="size-4 aspect-square outline-0 border-transparent absolute bottom-0 left-0  border-l-orange-400 border-b-orange-400 border">
      </div>

<div
        class="size-4 aspect-square outline-0 border-transparent absolute bottom-0 right-0  border-r-orange-400 border-b-orange-400 border">
      </div>
    </a>

<a href="#"
      class="flex w-full *:transition-all *:duration-200 *:ease-in group self-center relative py-3 px-8 bg-green-500/5 items-center justify-center hover:w-[90%] transition-all duration-200 ease-in  text-zinc-200 border border-green-500/10 ">
      <div
        class="size-4 aspect-square group-hover:-top-1 group-hover:-left-1 outline-0 border-transparent absolute top-0 left-0  border-l-green-400 border-t-green-400 border">
      </div>

<div
        class="size-4 aspect-square group-hover:-top-1 group-hover:-right-1 outline-0 border-transparent absolute top-0 right-0  border-r-green-400 border-t-green-400 border">
      </div>

DOWNLOAD

<div
        class="size-4 aspect-square group-hover:-bottom-1 group-hover:-left-1 outline-0 border-transparent absolute bottom-0 left-0  border-l-green-400 border-b-green-400 border">
      </div>

<div
        class="size-4 aspect-square group-hover:-bottom-1 group-hover:-right-1 outline-0 border-transparent absolute bottom-0 right-0  border-r-green-400 border-b-green-400 border">
      </div>
    </a>

</div>

</div>

Related Examples

Button with Bouncing Animation

Prashant

4 years ago

15.4k
Sharp corner button design
button with hover effect

Amit Pachange

3 years ago

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

Anonymous

3 years ago

14.3k
Underline Hover Effect
Hover effect using after and before pseudo elements.

Carlos Adrian Garcia

2 years ago

10.2k
Botton hover
On hover Changes text

davilaarroyo07

2 years ago

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

Anonymous

2 years ago

6.1k
Onhover underline effect

Dika Rahman

2 years ago

4.6k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Walid Ahmad

2 years ago

4.3k
Button
Button When Hover and page Reload then Button text will show the animation

Chitranshu

2 years ago

3.4k
Elevated Buton
On hover merge shadow

Anonymous

2 years ago

3.2k
Hover Button
Hover button then a overlay came from bottom to top

Md. Tofayel islam

2 years ago

2.7k
Custom Carosel

Md. Tofayel islam

2 years ago

3.9k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.