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
1import FlowButton from "./components/buttons/flow-button";
2
3export default function Home() {
4 return (
5 <main>
6 <div className="w-screen h-screen bg-black items-center justify-center flex">
7 <FlowButton text="Visit Studio IX Today" />
8 </div>
9 </main>
10 );
11}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-appCopy & Paste Components
components/buttons/flow-button.tsx
1import Link from "next/link";
2import React from "react";
3
4interface FlowButtonProps {
5 text: string;
6}
7
8const FlowButton: React.FC<FlowButtonProps> = ({ text }) => {
9 return (
10 <Link className="flow" href="https://www.studioix.agency">
11 <div className="flow-button">{text}</div>
12 <div className="flow-button-backdrop"></div>
13 </Link>
14 );
15};
16
17export default FlowButton;Add Styles
src/globals.css
1.flow {
2 z-index: 1;
3 transition: all 0.2s;
4 position: relative;
5 max-width: -moz-fit-content;
6 max-width: fit-content;
7 display: block;
8 margin: 0 auto;
9}
10
11.flow:hover {
12 text-decoration: none;
13 transform: translate(-1px, -1px);
14}
15
16.flow-button {
17 display: block;
18 z-index: 0;
19 -webkit-backdrop-filter: blur(10px);
20 backdrop-filter: blur(10px);
21 color: #000;
22 text-align: center;
23 background-color: rgba(255, 255, 255, 0.3);
24 border-radius: 0.25rem;
25 padding: 0.75rem 1.5rem;
26 font-weight: 500;
27 transition: all 0.2s;
28 position: relative;
29 transform: translate(0);
30 box-shadow: 1px 1px 1rem rgb(26 26 26 / 15%);
31}
32
33.flow-button:hover {
34 text-decoration: none;
35 transform: translate(-1px, -1px);
36}
37
38.flow-button-backdrop {
39 z-index: -2;
40 background: linear-gradient(
41 20deg,
42 rgba(241, 85, 76, 1) 0%,
43 rgba(247, 225, 150, 1) 100%
44 );
45 background-position: 0 0;
46 background-size: cover;
47 border-radius: 4px;
48 position: absolute;
49 top: 0%;
50 bottom: 0%;
51 left: 0%;
52 right: 0%;
53 transform: translate(0.5rem, 0.5rem);
54 pointer-events: none;
55}