Pro preview
Modal86% match
Midnight System Decision Modal
Midnight System kit
blue palettesolid surface
Unlock with Pro →Theme
A real <button> carrying .btn-progress-charge — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-progress-charge {
display: inline-block;
padding: 12px 28px;
border: none;
border-radius: 10px;
background-color: #1d4ed8;
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 7px, rgba(255, 255, 255, 0.1) 7px, rgba(255, 255, 255, 0.1) 14px);
background-repeat: no-repeat;
background-position: left top;
background-size: 0% 100%;
color: #eff6ff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.25s ease, transform 0.1s ease;
animation: btn-progress-charge-fill 2.4s linear infinite;
}
.btn-progress-charge:hover {
background-color: #1e40af;
}
.btn-progress-charge:active {
transform: scale(0.98);
}
@keyframes btn-progress-charge-fill {
0% {
background-size: 0% 100%;
}
78% {
background-size: 100% 100%;
}
100% {
background-size: 100% 100%;
}
}
.btn-progress-charge:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-progress-charge
Implementation notes
About the Progress Charge CSS button
Progress Charge uses a clear, high-contrast treatment for primary product actions. Its rounded corners balance product-friendly softness with a clear boundary. Motion comes from a 2.4s keyframe animation. The loading, animated details are included in the copy-paste CSS.
Usage
<button class="btn-progress-charge">Charging</button>Pair it with the CSS tab above — the class is self-contained.
Before shipping: keep the semantic button element, verify contrast on your actual background and add a visible
:focus-visible state. If you retain motion, include a prefers-reduced-motion override.- Built with
- HTML + plain CSS
- Shape
- Rounded
- Exports
- CSS, Tailwind, React
- License
- MIT · commercial use
Complete the look
Build the interface around this button
We matched its palette, surface, geometry and motion to a complete UI system — like composing an outfit, not browsing unrelated parts.
Style DNA · v1
How matching works →Free sample
Input86% match
Midnight System Smart Input
Midnight System kit
blue palettesolid surface
Pro preview
Toggle86% match
Midnight System Preference Toggle
Midnight System kit
blue palettesolid surface
Unlock with Pro →Pro preview
Card86% match
Midnight System Feature Card
Midnight System kit
blue palettesolid surface
Unlock with Pro →Pro preview
Dropdown86% match
Midnight System Action Menu
Midnight System kit
blue palettesolid surface
Unlock with Pro →Pro preview
Form86% match
Midnight System Signup Form
Midnight System kit
blue palettesolid surface
Unlock with Pro →Get the complete Midnight System kit
Six coordinated component types, commercial license and future kit updates.