Button

This tailwind example is contributed by Arjun Kumar, on 08-Apr-2026. Component is made with Tailwind v3.4. It is responsive.

Button

Author Arjun Kumar

Tailwind v3.4 626

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Button | Aurora</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      min-height: 100vh;
      background: linear-gradient(135deg, #0c0f1c 0%, #05060a 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }

.login-btn {
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
      outline: none;
      width: 340px;
      height: 130px;
      display: block;
      transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

.login-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, 
        #2b5f8a 0%, 
        #4a2b7a 35%, 
        #9b2f6f 70%, 
        #2b5f8a 100%);
      background-size: 200% 200%;
      border-radius: 70px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
      transition: all 0.3s;
      animation: gradientShift 4s ease infinite;
    }

@keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

.login-btn::after {
      content: '';
      position: absolute;
      inset: 2px;
      background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
      border-radius: 68px;
      pointer-events: none;
    }

.ring-outer {
      position: absolute;
      inset: -6px;
      border-radius: 76px;
      background: transparent;
      pointer-events: none;
    }

.ring-outer::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 76px;
      border: 1.5px solid rgba(100, 210, 255, 0.5);
      animation: ringRotate 8s linear infinite;
    }

.ring-outer::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 80px;
      border: 1px dashed rgba(255, 100, 210, 0.4);
      animation: ringRotateReverse 6s linear infinite;
    }

@keyframes ringRotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

@keyframes ringRotateReverse {
      0% { transform: rotate(360deg); }
      100% { transform: rotate(0deg); }
    }

.glow-core {
      position: absolute;
      inset: 8px;
      border-radius: 62px;
      background: radial-gradient(circle at 30% 20%, rgba(80, 180, 255, 0.15), rgba(180, 80, 255, 0.05));
      filter: blur(8px);
      pointer-events: none;
      animation: pulseGlow 3s ease-in-out infinite alternate;
    }

@keyframes pulseGlow {
      0% { opacity: 0.3; filter: blur(6px); }
      100% { opacity: 0.8; filter: blur(12px); }
    }

.btn-text {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      font-size: 1.6rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-family: 'Inter', system-ui, sans-serif;
      background: linear-gradient(135deg, #ffffff, #e0e0ff, #b8d0ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      transition: all 0.25s;
      text-shadow: 0 0 20px rgba(80, 160, 255, 0.3);
    }

.login-btn:hover {
      transform: translateY(-2px) scale(1.01);
    }

.login-btn:hover::before {
      background: linear-gradient(105deg, #3a6f9a, #5a3b8a, #ab3f7f, #3a6f9a);
      background-size: 200% 200%;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
      animation: gradientShift 2s ease infinite;
    }

.login-btn:hover .ring-outer::before {
      border-color: rgba(120, 230, 255, 0.8);
      border-width: 2px;
      animation: ringRotate 4s linear infinite;
    }

.login-btn:hover .ring-outer::after {
      border-color: rgba(255, 130, 220, 0.7);
      animation: ringRotateReverse 3s linear infinite;
    }

.login-btn:hover .btn-text {
      letter-spacing: 4.5px;
      font-size: 1.68rem;
      background: linear-gradient(135deg, #ffffff, #cce5ff, #ffccf0);
      -webkit-background-clip: text;
      background-clip: text;
      text-shadow: 0 0 30px rgba(100, 200, 255, 0.5);
    }

.login-btn:active {
      transform: scale(0.97) translateY(1px);
      transition: transform 0.08s;
    }

.login-btn:active::before {
      filter: brightness(0.95);
      transition: filter 0.05s;
    }

.login-btn:active .btn-text {
      transform: scale(0.98);
      transition: transform 0.05s;
    }

.stardust {
      position: absolute;
      inset: 0;
      border-radius: 70px;
      overflow: hidden;
      pointer-events: none;
    }

.stardust::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
      background-size: 30px 30px;
      animation: dustDrift 20s linear infinite;
      opacity: 0.4;
    }

@keyframes dustDrift {
      0% { transform: translate(0, 0); }
      100% { transform: translate(40px, 40px); }
    }

.login-btn:hover .stardust::before {
      opacity: 0.7;
      animation-duration: 8s;
    }

@media (max-width: 450px) {
      .login-btn {
        width: 280px;
        height: 110px;
      }
      .btn-text {
        font-size: 1.35rem;
        letter-spacing: 2.5px;
      }
      .login-btn:hover .btn-text {
        font-size: 1.4rem;
        letter-spacing: 3.5px;
      }
      .login-btn::before {
        border-radius: 60px;
      }
      .ring-outer::before, .ring-outer::after {
        border-radius: 66px;
      }
    }

@media (max-width: 320px) {
      .login-btn {
        width: 240px;
        height: 95px;
      }
      .btn-text {
        font-size: 1.2rem;
        letter-spacing: 2px;
      }
    }
  </style>
</head>
<body>
  <button class="login-btn">
    <div class="ring-outer"></div>
    <div class="glow-core"></div>
    <div class="stardust"></div>
    <span class="btn-text">LOGIN</span>
  </button>
</body>
</html>

Related Examples

Button with hover animation

Andrew

1 year ago

2.9k
Amazon shopping buy now button
Amazon shopping buy now button

OmKar Mehta

2 years ago

2.7k
Sign in with buttons

Simon Scheffer

3 years ago

12k
Linkedin login/signup button

Shakti

3 years ago

13.6k
Settings Button

Arya

4 years ago

11.5k
Button with Bouncing Animation

Prashant

4 years ago

15.3k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.3k
Button pair

Piet Vriend

3 years ago

11.7k
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Hyun-woo Cho

2 years ago

10.4k
Buy me a coffee floating button

Ron Hicks

3 years ago

15.1k
View More Button

Amit Pachange

3 years ago

20.3k
neon-button-purple

Mohammad Rashel

9 months ago

746