Rectangle Buttons
Twenty-four authored rectangle-button and animated CTA treatments collected into one family.
Runtime: DOM + CSS
Rectangle Buttons variants
- Rectangle Buttons — Dark Glass
A deep charcoal glass rectangle with a softly revolving inner highlight and restrained metallic type.
- Rectangle Buttons — Launch Button
A warm amber launch control with tactile depth, a soft aura, and a compact lightning icon.
- Rectangle Buttons — Dot Border Button
A bright creation CTA framed by four corner dots and sequentially drawn dashed border segments.
- Rectangle Buttons — Floating Dots CTA
A saturated blue CTA with a glass highlight and a continuous stream of floating light points.
- Rectangle Buttons — Sliding Text CTA
A dark rectangle CTA whose label slides, blurs, and resolves into a crisp duplicate on hover.
- Rectangle Buttons — Gradient Beam CTA
A dark builder CTA with a rotating orange edge beam, drifting dot texture, and responsive glow.
- Rectangle Buttons — Gradient Pill Button
A restrained metallic lesson control with a masked gradient edge, soft elevation, and arrow icon.
- Rectangle Buttons — Generate Button
A glossy generate control with prismatic borders, animated lettering, and an illuminated sparkle icon.
- Rectangle Buttons — Glassmorphism CTA
A glass CTA with a revolving highlight, advisor portrait, and a glowing generative-action icon.
- Rectangle Buttons — Spinning Border Button
A compact graphite CTA that replaces its static edge with a rotating white border beam on hover.
- Rectangle Buttons — Gradient CTA
A sunlit amber CTA with inset highlights, deep elevation, and a rising hover sheen.
- Rectangle Buttons — Lumen CTA
The authored six-stop violet gradient pill with its inner highlight, cast glow, and trailing open ring.
- Rectangle Buttons — Lumen CTA Ghost
The authored sibling pill with the same geometry, a blurred glass fill, and a hairline outline.
- Rectangle Buttons — Trochil Signal
The selected Trochil request-access treatment: a restrained black technical rectangle with a fine lit edge and passing warm signal sheen.
- Rectangle Buttons — Attune Thermal
The selected Attune primary action with a compact orange thermal gradient, inset highlight, grounded glow, and chevron.
- Rectangle Buttons — Tideform Outline
The selected Tideform action: a square technical outline with tracked mono type, warm hover state, and a long directional arrow.
- Rectangle Buttons — Understory Arrow Pill
The selected Understory action with a violet capsule surface and an inset paper-toned circular arrow endcap.
- Rectangle Buttons — Meridian Keycap Primary
The selected Meridian primary action rebuilt as a blue illuminated keycap with a physical base, LED, and pressed hover travel.
- Rectangle Buttons — Meridian Keycap Secondary
The selected Meridian secondary action using the same tactile keycap geometry in its graphite night-side treatment.
- Rectangle Buttons — Halvorsen Arrow Pill
The selected Halvorsen action: the shared editorial arrow-pill structure recut as a bone-white capsule with a black inset arrow disc.
- Rectangle Buttons — Aster Glass Access
The compact Aster navigation action with a translucent smoke surface, masked crystalline edge, top sheen, and restrained hover lift.
- Rectangle Buttons — Aster Glass Arrow
The Aster primary CTA using the same glass material with a bordered inset chip and a directional arrow that advances on hover.
- Rectangle Buttons — Ember Keycap
A tactile pre-order keycap with an ember spark, machined graphite cap, top-edge glow, bloom, price legend, and pressed hover travel.
- Rectangle Buttons — Bloom Outline Button
An outlined seasonal CTA with a pale blossom edge, paired dots, pointer-positioned ink bloom, magnetic drift, and sliding duplicate label.