Threads Button

A sleek button with purple glow effects and hover animations.

Preview

Code

Code

app/page.tsx

1import ThreadsButton from "@/app/components/buttons/threads-button"; 2 3const ThreadsButtonPage = () => { 4 return ( 5 <div className="w-screen h-screen bg-black items-center justify-center flex"> 6 <ThreadsButton text="Sign up today" /> 7 </div> 8 ); 9} 10 11export default ThreadsButtonPage;

Installation

Initialized a project and installed the necessary dependencies to use this component.

1. Initialize a new Next.js project:

Code
npx create-next-app@latest my-app

Copy & Paste Components

Code

components/buttons/threads-button.tsx

1import { ArrowRightCircle } from "lucide-react"; 2import React from "react"; 3 4interface ThreadsButtonProps { 5 text: string; 6} 7 8const ThreadsButton: React.FC<ThreadsButtonProps> = ({ text }) => { 9 return ( 10 <div className="thread-button-backdrop"> 11 <button className="thread-button" type="submit"> 12 {text} 13 <ArrowRightCircle /> 14 </button> 15 </div> 16 ); 17}; 18 19export default ThreadsButton;

Add Styles

Code

src/globals.css

1.thread-button { 2 background: linear-gradient(180deg, #896efd 0, #6b4afc 100%); 3 height: 44px; 4 width: 100%; 5 font-weight: 600; 6 font-size: 16px; 7 line-height: 24px; 8 text-align: center; 9 color: #efeff1; 10 border-radius: 8px; 11 border: none; 12 display: flex; 13 justify-content: center; 14 align-items: center; 15 gap: 8px; 16} 17 18.thread-button:hover { 19 background: linear-gradient(180deg, #6b4afc 0, #563bca 100%); 20} 21 22.thread-button-backdrop { 23 box-shadow: 0 0 4px #e595ff, 0 0 48px rgba(130, 26, 250, 0.5); 24 display: flex; 25 flex-flow: row; 26 place-content: center; 27 align-items: center; 28 padding: 4px; 29 background-color: rgba(161, 138, 255, 0.24); 30 border-radius: 12px; 31 margin: 10px auto 24px; 32 width: 204px; 33}

Become an Astrae
Affiliate Today

Make referrals, and bring in clients. Keep 50% of your earnings paid out weekly.

Description