Enhanced Animated Submit Button – Pulse Glow & Shine Sweep Free CSS

Enhanced Animated Submit Button – Free Pure CSS Pulse Glow @keyframes, Shine Sweep ::before, Hover Scale & :active Press Effect (Zero JavaScript, Gradient Pill, 3-State Interaction)

The Enhanced Animated Submit Button is a free, copy-paste ready form submit button component built with pure HTML and CSS only — zero JavaScript required. This is the key distinction from the sign-in, sign-up, search, and refresh button siblings: this button achieves all its animation through CSS @keyframes and ::before pseudo-elements, with no click event handlers or DOM manipulation. It is suited for any <form> submit button, CTA button, or action button where a native browser form submission is desired.

Base styles: background: linear-gradient(45deg, #6c63ff, #8e7bff) (indigo→soft purple), border-radius: 60px (full pill), padding: 18px 48px, font-size: 20px, font-weight: 700, overflow: hidden (clips shine), box-shadow: 0 6px 15px rgba(108,99,255,0.4), 0 0 10px rgba(108,99,255,0.6). Pulse glow: animation: pulseGlow 3s ease-in-out infinite — @keyframes pulseGlow cycles the outer box-shadow spread from 10px to 40px at the 50% keyframe, creating a breathing neon effect that runs continuously without any user interaction. Shine sweep: ::before with position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(120deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%); transform: skewX(-25deg); animation: shine 2.5s infinite — looping continuously at idle. On :hover::before: animation: shine 0.75s forwards — accelerates to 0.75s and stops (forwards keeps it exited right, avoiding a snap-back). Hover state: transform: scale(1.1), deeper gradient (#5848c2→#7260dd), intense purple glow, animation: none (pauses pulse to prevent glow flicker). Active state: transform: scale(0.95) for a physical press-down feel.

What's Included in the Download

Gradient fill: #6c63ff→#8e7bff
border-radius: 60px full pill
@keyframes pulseGlow 3s infinite
Box-shadow 10px→40px breathing
::before shine skewX(-25deg)
Idle shine loop: 2.5s infinite
Hover shine: 0.75s forwards
Hover: scale(1.1) + deep glow
animation:none on hover (no flicker)
:active scale(0.95) press effect
transition: background 0.4s ease
transition: transform 0.3s ease
Native <form> submit button
Zero JavaScript required
Single self-contained HTML file
No external CDN dependencies
prefers-reduced-motion ready
CC BY 4.0 — free for commercial use

Why animation:none on Hover Is Critical

Without animation: none in the hover rule, the running pulseGlow animation would continue updating box-shadow every frame while the hover's static box-shadow is also applied. CSS specificity determines which wins, but mid-cycle the animation's interpolated value can temporarily override the hover value, causing visible flicker — the glow intensity fluctuates rapidly as the animation and hover state compete. Setting animation: none on :hover cancels the running animation immediately, clearing the animated box-shadow and letting the hover's explicit value take over cleanly. This is a non-obvious CSS interaction that trips up most implementations — knowing to add animation: none to the hover rule is the difference between a polished effect and a flickering one.

How the Dual-Speed Shine Works

The same @keyframes shine rule (left: -75% → left: 125%) is used for both speeds — only the animation shorthand duration changes. At idle: animation: shine 2.5s infinite — slow, atmospheric sweep that completes then repeats. On hover: the inline :hover::before override switches to animation: shine 0.75s forwards. The forwards fill mode holds the element at its 100% keyframe position (left: 125%, fully off-screen right) after the animation ends. This prevents the shine from snapping back to left: -75% and starting a new loop mid-hover. When the user moves the cursor away, the ::before reverts to the idle 2.5s infinite animation and naturally resumes from left: -75%.

License

Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.

Source Code

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Enhanced Animated Submit Button</title>
</head>
<body>
  <form action="/submit" method="POST">
    <button type="submit" class="submit-button">Submit</button>
  </form>
</body>
</html>

/* Center layout */
body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.submit-button {
  background: linear-gradient(45deg, #6c63ff, #8e7bff);
  color: white;
  border: none;
  padding: 18px 48px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(108, 99, 255, 0.4), 0 0 10px rgba(108, 99, 255, 0.6);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Hover effect */
.submit-button:hover {
  background: linear-gradient(45deg, #5848c2, #7260dd);
  transform: scale(1.1);
  box-shadow: 0 12px 25px rgba(88, 72, 194, 0.7), 0 0 20px rgba(130, 110, 255, 0.9);
  animation: none;
}

/* Active effect */
.submit-button:active {
  transform: scale(0.95);
  box-shadow: 0 6px 12px rgba(88, 72, 194, 0.5);
}

/* Shining sweep effect */
.submit-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
  transform: skewX(-25deg);
  animation: shine 2.5s infinite;
}

.submit-button:hover::before {
  animation: shine 0.75s forwards;
}

/* Pulse glow animation */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 6px 15px rgba(108, 99, 255, 0.4), 0 0 10px rgba(108, 99, 255, 0.6);
  }
  50% {
    box-shadow: 0 10px 25px rgba(140, 120, 255, 0.8), 0 0 40px rgba(140, 120, 255, 1);
  }
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

Frequently Asked Questions

Common questions about the free Enhanced Animated Submit Button project.

Is this enhanced animated submit button free to download?

Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment. Click Download Project and use it in any form or CTA with attribution to Coodeverse. Zero JavaScript required.

How do you create a pulsing neon glow animation on a CSS button without JavaScript?

Use @keyframes pulseGlow { 0%, 100% { box-shadow: 0 6px 15px rgba(108,99,255,0.4), 0 0 10px rgba(108,99,255,0.6); } 50% { box-shadow: 0 10px 25px rgba(140,120,255,0.8), 0 0 40px rgba(140,120,255,1); } } then apply animation: pulseGlow 3s ease-in-out infinite. The outer spread radius jumps from 10px to 40px at 50%, creating a breathing neon effect. On hover, add animation: none to pause the pulse and prevent flicker — the hover's explicit box-shadow takes over cleanly.

How do you create a continuously looping shine sweep on a CSS button?

Add a ::before pseudo-element (requires overflow:hidden on parent): position:absolute; top:-50%; left:-75%; width:50%; height:200%; background:linear-gradient(120deg,rgba(255,255,255,0.35),rgba(255,255,255,0) 60%); transform:skewX(-25deg); animation:shine 2.5s infinite. Define @keyframes shine { 0% { left:-75%; } 100% { left:125%; } }. For hover, override: :hover::before { animation:shine 0.75s forwards; } — faster sweep, and forwards stops the shine at right edge instead of looping.

What is the difference between this submit button and the sign-in or sign-up buttons?

Four differences: (1) Style — submit uses solid gradient fill + border-radius:60px pill; sign-in/sign-up use glassmorphism (backdrop-filter:blur(10px)) + border-radius:14px. (2) Animation — submit has continuous idle @keyframes pulseGlow 3s infinite; sign-in/sign-up are static until hovered. (3) Shine — submit uses @keyframes for both idle (2.5s) and hover (0.75s); sign-in/sign-up use a CSS transition. (4) JavaScript — submit requires zero JS; sign-in/sign-up need JS for the loading progress bar. Use submit for native form CTAs; use sign-in/sign-up for auth forms with async loading state.

Why does the pulse animation stop on hover and how do you implement that?

Add animation: none to the :hover rule. Without it, the running pulseGlow animation continues updating box-shadow every frame, competing with the hover's static box-shadow — causing visible flicker mid-cycle. Setting animation: none cancels the running animation instantly, letting the hover's explicit box-shadow: 0 12px 25px rgba(88,72,194,0.7), 0 0 20px rgba(130,110,255,0.9) take over with no interference.

How do you add an :active press-down effect to a CSS button?

Add .submit-button:active { transform: scale(0.95); box-shadow: 0 6px 12px rgba(88,72,194,0.5); }. The scale(0.95) shrinks the button 5%, simulating a physical press-in. The reduced box-shadow reinforces the pressed feel. The transition: transform 0.3s ease on the base element smooths the entry into :active, but release is typically snappy because :active ends on mouseup. The three-state progression (idle → :hover scale(1.1) → :active scale(0.95)) creates a fully tactile feel in pure CSS.

Where can I find more free animated submit button and form UI projects?

Browse coodeverse.com/projects — Animated Sign-In Button, Animated Sign-Up Button, Stylish Animated Search Button, Enhanced Animated Refresh Button, and more. All 100% free with complete HTML CSS JavaScript source code.