Home
Arjun Kumar
Button

Button

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

Button

Author Arjun Kumar

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

Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

1 year ago

3.5k
Github stars button
Display the GitHub stars received by your project

Author:
Benjamin Ng

2 years ago

9k
rgb border button

Author:
Akram Khan

1 year ago

2.2k
Sign up with google button

Author:
Laurits

3 years ago

42.2k
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Author:
Arnav K

2 years ago

5.8k
Join now button
Attractive button for the CTA section

Author:
Matej Kovač

2 years ago

2.7k
Border bottom button

Author:
Santos78

3 years ago

12.7k
hero modern
hero modern

Author:
Omer fils ELENGA

3 months ago

366
Simple Btn animation

Author:
Ranit Saha

1 year ago

1.9k
Button with hover effect
Button with light hover effect, responsive and suitable for light/dark mode.

Author:
isaSxm

7 months ago

443
hero page
by salvator

Author:
Baraka Salvator

10 months ago

1.9k
button
Background Studio

Author:
nickosamba.nh21

2 months ago

327

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components