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}