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

flower
by salvator

Baraka Salvator

1 year ago

1.8k
Animated button
on hover underline will go from left to right

Anonymous

2 years ago

5.9k
Buttons with shadow

Leon Bachmann

3 years ago

13k
Button
Material Button

Akram Khan

2 years ago

2.1k
scroll to top buton with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.7k
Gradient shadow button

Manon Daniel

3 years ago

18.2k
Beautiful animated button
on hover effect

Dika Rahman

2 years ago

5.5k
Hamburger menu button with hover effect

_Amar_

3 years ago

18.3k
Primary secondary button pair

Iris Callahan

1 year ago

2.1k
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.

Anum Shahana

1 year ago

4k
Continue with Social Login - Continue with Google, LinkedIn, Twitter, Facebook, GitHub, Apple
Streamline your account creation and login process. Use our secure social login buttons to quickly sign in or register using your existing Google, LinkedIn, Twitter, Facebook, GitHub, or Apple account.

Homayoun

11 months ago

831
Buttons variations

R.P Ketan

3 years ago

10.4k