CategoriesAllHeroNavigationFooterCall-to-ActionsFeature SectionsTestimonialsPricingContactGalleryStatsFAQServicesNewsletterAuthMiscellaneousButtons
All Components3D Cube InteractionBorder Logo GridCountdownFlip ButtonExpandable FAQsFlow ButtonGlow ButtonGrayscale CarouselInertia Zoom ParallaxLogo Cloud GridMobile Drawer NavigationPixel PreloaderProject GalleryRing ButtonShowcase CarouselSlide PreloaderSliding Stairs PreloaderStormtrooper FAQText Gradient OpacityThreads ButtonTilt HeadlineUltra Preloader
Code
app/page.tsx
1"use client"
2
3import FlipButton from "@/app/components/buttons/flip-button";
4
5const Home = () => {
6 return (
7 <div className="w-screen h-screen bg-black items-center justify-center flex flex-col gap-8">
8 <FlipButton
9 text="Astrae Design"
10 href="https://astrae.design"
11 />
12 </div>
13 );
14}
15
16export default Home;Installation
Initialized a project and installed the necessary dependencies to use this component.
1. Initialize a new Next.js project:
npx create-next-app@latest my-appAdd Button Component
src/components/flip-button.tsx
1import React from "react";
2
3interface FlipButtonProps {
4 text?: string;
5 href?: string;
6}
7
8const FlipButton: React.FC<FlipButtonProps> = ({ text = "Stack Sorted.", href }) => {
9 const content = (
10 <>
11 {/* First span - visible by default, rotates out on hover */}
12 <span className="flip-span">
13 <em className="flip-text flip-text-1">
14 {text}
15 </em>
16 </span>
17
18 {/* Second span - hidden by default, rotates in on hover */}
19 <span className="flip-span flip-span-2">
20 <em className="flip-text flip-text-2">
21 {text}
22 </em>
23 </span>
24 </>
25 );
26
27 if (href) {
28 return (
29 <a href={href} className="flip-button">
30 {content}
31 </a>
32 );
33 }
34
35 return (
36 <button className="flip-button">
37 {content}
38 </button>
39 );
40};
41
42export default FlipButton;Add Global Styles
app/globals.css
1/* Flip Button - 3D rotation effects */
2.flip-button {
3 display: flex;
4 flex-direction: column;
5 align-items: center;
6 overflow: hidden;
7 line-height: 1;
8 border-radius: 7rem;
9 padding: 0.815rem 1.232rem;
10 cursor: pointer;
11 border: none;
12 background: white;
13 transition: background 0.4s linear;
14 will-change: background;
15}
16
17.flip-button:hover {
18 background: #6fc1ff;
19}
20
21.flip-button:hover .flip-text-1 {
22 opacity: 0;
23 transform: rotateX(90deg) scaleX(0.9) translate3d(0, -10px, 0);
24}
25
26.flip-button:hover .flip-text-2 {
27 opacity: 1;
28 transform: rotateX(0deg) scaleX(1) translateZ(0);
29 transition: transform 0.75s cubic-bezier(0.645, 0.045, 0.355, 1),
30 opacity 0.35s linear 0.3s;
31}
32
33.flip-span {
34 position: relative;
35 display: block;
36 perspective: 108px;
37}
38
39.flip-span-2 {
40 position: absolute;
41}
42
43.flip-text {
44 font-style: normal;
45 display: inline-block;
46 font-size: 1.125rem;
47 color: black;
48 font-weight: 600;
49 will-change: transform, opacity, transition;
50 transition: transform 0.55s cubic-bezier(0.645, 0.045, 0.355, 1),
51 opacity 0.35s linear 0.2s;
52}
53
54.flip-text-1 {
55 transform-origin: top;
56}
57
58.flip-text-2 {
59 opacity: 0;
60 transform: rotateX(-90deg) scaleX(0.9) translate3d(0, 10px, 0);
61 transform-origin: bottom;
62}
63
64/* Flip Button - 3D rotation effects */