Motion & effects / CSS button styles
Colorion Gradient Buttons
Find a gradient treatment for a defined action.
Understand the resource
What it is.
Gradient Buttons provides browsable button styles and copyable CSS. Use it to explore color and emphasis while retaining the product’s existing button behavior and hierarchy.
When it is useful
A marketing CTA needs a more expressive surface.
A proposed application
Put it to work.
This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.
Try this
Choose a restrained gradient, map its colors to brand tokens, and check the full hover range behind the label.
Result to aim for
A styled CTA with legible states.
Before you start
What you need.
- CSS support and a semantic button or link with the appropriate action.
The practical boundaries
What to watch for.
- Contrast must hold across the gradient, not just at one sampled point.
- A visual effect does not determine whether an action deserves primary emphasis.
Review record
What we could establish.
- Public primary documentation and the bounded account-free checks below were reviewed. The Sea Blue sample shifted its gradient on hover and activated by keyboard in a local native-button wrapper. Its CSS removed the keyboard outline, leaving one unmet focus expectation.
The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.
Check current access, terms, licensing and data handling before using a resource with your own material.
Runtime and security evaluation
What the evaluation covers.
The Sea Blue sample shifted its gradient on hover and activated by keyboard in a local native-button wrapper. Its CSS removed the keyboard outline, leaving one unmet focus expectation.
Methods: Public HTTP response · Public browser sample · Local package fixture. A completed check covers the stated sample; it is not a safety certification.
- Target
- colorion-gradient-buttons first public CSS sample
- Version or capture
- unversioned generated sample
- Integrity scope
- sha256:4fdf9b8a7cf0ffc8f834d1f8b0095cbaf70002ba38da68245df18f91bbc0675b
Test conditions
- Chromium 155.0.8059.82 on Windows; fresh temporary profile and fresh account-free contexts.
- Public HTTPS GET/HEAD requests only; telemetry/auth routes and WebSockets blocked. No account storage or credential environment variables.
- Synthetic local inputs only. Package/skill source inspected before execution; no install lifecycle scripts run.
- Local package/CSS browser fixtures block real network. Variate additionally uses Node filesystem permissions and a no-network preload.
Individual checks and observations
Public document and DOM
passPublic browser sample: Fresh Chromium GET, then inspect rendered controls after hydration delay
Observed: HTTP 200; 70 captured button labels; 1 inputs; 0 canvases.
CSS sample generation
passPublic browser sample: Open first CSS disclosure and inspect code or captured copy output; system clipboard is not written
Observed: Captured 470 UTF-8 bytes; SHA256 4fdf9b8a7cf0ffc8f834d1f8b0095cbaf70002ba38da68245df18f91bbc0675b. This verifies disclosed/generated output, not OS clipboard permission.
Gradient hover response
passLocal package fixture: Read background position before and after pointer hover
Observed: {"before": "0% 0%", "after": "100% 50%"}
Native keyboard activation
passLocal package fixture: Tab to authored button and press Enter; inspect local click counter
Observed: {"focused": true, "clicks": 1, "outlineStyle": "none", "outlineWidth": "3px"}
Visible focus boundary
failLocal package fixture: Inspect computed keyboard focus outline
Observed: {"focused": true, "clicks": 1, "outlineStyle": "none", "outlineWidth": "3px"}
Security findings and boundaries
Passive inspection of the public response headers, requested hosts and the named browser sample. Also inspected pinned source and the specified synthetic fixture outputs. No active exploitation, authenticated permissions test or complete security audit.
Observed · concern
Copied CSS suppresses the keyboard outline
The sample includes outline:none. The focused fixture reported outline-style none even though Enter activated the button. Add a visible focus treatment before use.
Practical caveats
- Restore a clear :focus-visible ring and check contrast at both ends of the gradient.
- Pin and recheck the selected version or sample before adoption; the observations apply only to the scope and date shown.
What remains untested
- One generated sample only; no complete gallery, touch, forced-colors or contrast audit. The native click handler belongs to the authored fixture.
- Fresh-browser restrictions can affect external assets and hydration. Initial failed selectors and limited probes remain in the evidence; they are not blanket product failures.
Security limits
- No authenticated workspace, private content, production backend permissions or data-retention verification.
- One generated sample only; no complete gallery, touch, forced-colors or contrast audit. The native click handler belongs to the authored fixture.
Evaluation sources
Follow the evidence
Sources and further reading.
Keep exploring