Code
app/page.tsx
1import GlowButton from "@/app/components/buttons/glow-button";
2
3const GlowButtonPage = () => {
4 return (
5 <div className="w-screen h-screen bg-black items-center justify-center flex">
6 <GlowButton text="Glow in the dark" />
7 </div>
8 );
9}
10
11export default GlowButtonPage;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/glow-button.tsx
1import { ArrowRight } from "lucide-react";
2import Link from "next/link";
3import React from "react";
4
5interface GlowButtonProps {
6 text: string;
7}
8
9const GlowButton: React.FC<GlowButtonProps> = ({ text }) => {
10 return (
11 <Link href="https://studioix.agency" className="cta">
12 <div className="text">
13 {text} <ArrowRight />
14 </div>
15 </Link>
16 );
17};
18
19export default GlowButton;Add Styles
src/globals.css
1.cta {
2 position: relative;
3 display: inline-flex;
4 font-size: 18px;
5 cursor: pointer;
6 transition: opacity 0.3s ease-in-out;
7 align-items: center;
8}
9
10.cta:after {
11 position: absolute;
12 top: -0.4em;
13 left: -1.5em;
14 z-index: 1;
15 width: calc(100% + 3em);
16 height: calc(100% + 1em);
17 background-image: linear-gradient(225deg, #32c5ff, #b620e0 51%, #f7b500);
18 border-radius: 100%;
19 opacity: 0.66;
20 filter: blur(1em) saturate(1.18);
21 transition: transform 0.2s;
22 content: "";
23}
24
25.cta a {
26 text-align: center;
27 width: 100%;
28}
29
30.text {
31 position: relative;
32 display: flex;
33 gap: 5px;
34 align-items: center;
35 justify-content: space-between;
36 height: auto;
37 padding: 18px 30px;
38 overflow: hidden;
39 font-weight: 700;
40 font-size: 1em;
41 letter-spacing: 0.2em;
42 text-transform: uppercase;
43 text-shadow: none;
44 border: none;
45 border-radius: 50px 50px;
46 transform: translateZ(0);
47 -webkit-backface-visibility: hidden;
48 backface-visibility: hidden;
49 z-index: 2;
50 white-space: nowrap;
51}
52
53.text:after,
54.text:before {
55 position: absolute;
56 top: 0;
57 left: 0;
58 width: 100%;
59 height: 100%;
60 content: "";
61}
62
63.text:before {
64 top: -0.67em;
65 left: -1.5em;
66 z-index: -1;
67 width: calc(100% + 3em);
68 height: calc(100% + 1em);
69 background-image: linear-gradient(225deg, #32c5ff, #b620e0 51%, #f7b500);
70 opacity: 0.5;
71 filter: blur(0.83em) saturate(1.2);
72}
73
74.text:after {
75 z-index: -1;
76 background: linear-gradient(135deg, #fff, #b6b6b6 150%);
77 transform: translateZ(0);
78 -webkit-backface-visibility: hidden;
79 backface-visibility: hidden;
80 opacity: 1;
81 transition: opacity 0.2s;
82}
83
84@media (hover: hover) {
85 .cta:hover .text::after {
86 opacity: 0.6;
87 }
88}