PROVideo
Title Revealed by a 3D Leaf Sweep
- 542542 downloads
- 166166 likes
- 171171 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
Gradient outline call-to-action button v1.0.0
Use this resource to create a standout call-to-action button
New
- 562 downloads
- 200 likes
- 213 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install gradient-outline-buttonFirst time: connect the CLI with
npx --yes palatekit@latest loginThe agent builds a button whose border is a 144-degree gradient and whose dark inside fades on hover. A slight shrink signals the click. You get a crisp button for a sales or launch page.
Mostly picked by
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- PRO
PROVideo
Headline That Flips Tile by Tile
- 523523 downloads
- 189189 likes
- 197197 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
3D wireframe title bursting from a portal
- 335335 downloads
- 176176 likes
- 221221 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Vertical AI chat exchange ad video
- 392392 downloads
- 148148 likes
- 224224 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
AI chat ad video with comparison table
- 361361 downloads
- 234234 likes
- 172172 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
FreeVideo
Soft animated gradient, minimal presentation style
- 445445 downloads
- 120120 likes
- 116116 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Animated Specs Checklist Over Video
- 371371 downloads
- 212212 likes
- 109109 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
App showcase on three smartphones
- 384384 downloads
- 101101 likes
- 112112 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- README.md: step-by-step integration guide
- Buttons/cssbuttons-io_wonderful-baboon-62.html: the component HTML and CSS, ready to copy
- The variables and selectors to edit for colours and size
Good fit for
- Main button of a launch page
- Product page call to action
- Waitlist signup
Not for
- A restrained brand without gradients
- Many buttons on one page
Tags
- button
- gradient
- call to action
- css
- hover
About
You say
"Replace the "Buy" button on my product page with the gradient outline button from the resource, in my brand colours."
Component published by cssbuttons-io on Uiverse under the MIT license, documented by PalateKit.
Show moreShow less
Prerequisites
- You bring
- The button text and Your brand colours
How to use it
- Give the resource to your coding agent
- Ask it to insert the component where you want it and adapt text and colours
- Open the page and check hover and mobile rendering
Content preview
Files
- Buttons/cssbuttons-io_wonderful-baboon-62.html1 KB
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- README.md0.8 KB
Origin and licence
Modified by PalateKit
- Author
- cssbuttons-io
- Source
- github.com/uiverse-io/galaxy/tree/adbd2adde0a299a3956ea288fb444ec01891ca41/Buttons/cssbuttons-io_wonderful-baboon-62.html
- Licence
- MIT
Notice
Version modifiée de « cssbuttons-io_wonderful-baboon-62 » (cssbuttons-io, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
How do I add it to my site?
Copy the HTML and the CSS block into your page, or the CSS into your stylesheet. No JavaScript is needed.
How do I customise it?
Edit: the three gradient colours are in the background-image of button; the inner fill is in button span (rgb(5, 6, 45)). Note: the "button" selector is global, scope it to a class. To respect visitors sensitive to motion, wrap the animations in an @media (prefers-reduced-motion: no-preference) rule.