Skip to content

Instantly share code, notes, and snippets.

Last active September 15, 2023 16:14
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A TailwindCSS glowing gradient border button
import React from 'react'
function cn(...classes: any[]) {
return classes.filter(Boolean).join(' ')
type Props = {
gradient: string // 'bg-gradient-to-r from-red-600 via-purple-600 to-blue-600',
children: React.ReactNode
href: string
target?: string
rel?: string
export default function GlowingGradientBorderButton({
target = '_blank',
rel = 'noreferrer noopener'
}: Props) {
return (
<div className="flex justify-center">
<div className="relative group">
<div className={
'absolute -inset-0.5 rounded-2xl blur group-hover:blur-xl opacity-75 transition duration-500 group-hover:duration-200 group-hover:opacity-100 will-change-filter overflow-hidden',
className="relative block w-64 h-16 md:h-20 group-hover:scale-105 duration-500 group-hover:duration-200"
<span className={cn('block h-full inset-0.5 rounded-xl p-1', gradient)}>
<span className="h-full items-center px-6 bg-neutral-900 text-neutral-50 rounded-lg">
// this is necessary to fix the blur effect in safari
theme: {
extend: {
willChange: {
'filter': 'filter',
Copy link

JohnBra commented Oct 18, 2022

A glowing gradient border button built with pure TailwindCSS

Size is fixed, sou you will have to adjust it to your needs.
You must pass the gradient style as prop. See comment for inspiration.

This is how it looks in action:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment