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 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}