5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8ab,

This component is a high-impact promotional CTA button designed to immediately draw attention to your offers.

On hover, the button expands into an interactive moment by revealing two floating awareness messages above and below the button. These messages can be used to communicate urgency, highlight promotions, or reinforce value before the user clicks.

The interaction creates a small but powerful moment of engagement that naturally guides visitors toward taking action.

Whether you're promoting a limited-time offer, highlighting remaining slots, or drawing attention to a special announcement, this component makes your call-to-action impossible to ignore.

Key Features

Interactive hover revealWhen users hover over the button, two awareness messages smoothly appear above and below the CTA, reinforcing urgency or value.

Perfect for promotional messagingUse it to display messages like:

“Expires today”
“Limited slots left”
“Early access”
“Special offer”

Fully customizable

Everything is editable inside Framer:

Button text
Message labels
Colors
Background styling
Layout spacing

Designed to increase engagement

The hover animation creates a moment of curiosity and interaction that encourages users to click.

Flexible use cases

This component works perfectly for:

promotional offers
product launches
waitlists
limited slots
early access programs
agency services
landing page CTAs

Built for Framer

Created as a Framer component, making it easy to integrate into any Framer website or project.

Future Updates

This component will continue to receive improvements and updates as Framer evolves. Enhancements, refinements, and additional customization options will be added to keep it modern and flexible for future projects.

5a:[["$","$L5d",null,{"post":{"id":"019eda3a-2039-750f-b42b-554f8aaeb3aa","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"38435a5e-e6fd-4ae7-8205-0866a6949320","name":"Lorx Ayo","slug":"lorxelayo","avatar":"https://framerusercontent.com/avatars/users/38435a5e-e6fd-4ae7-8205-0866a6949320/3tj0eu6DG","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JasKPbstwdb75aZYsQIh","resolved":true,"title":"Offer button","body":"$5e","bodyJson":null,"introduction":"Interactive Offer Promotion Button","slug":"offer-button","author":{"framerUserId":"38435a5e-e6fd-4ae7-8205-0866a6949320","name":"Lorx Ayo","slug":"lorxelayo","avatar":"https://framerusercontent.com/avatars/users/38435a5e-e6fd-4ae7-8205-0866a6949320/3tj0eu6DG","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JasKPbstwdb75aZYsQIh/offer-button-I3SVStusnfthbRKJPlgmO99y3ktGbO","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-16T07:43:13.814Z","updatedAt":"2026-04-07T07:49:06.556Z","publishedAt":"2026-06-18T10:15:02.969Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Offer-button-Ghz2cs.js@mIT6TQBz3dB5oXmrfOzn","previewUrl":"https://lorxelayo-components.framer.website/offer-button","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"mIT6TQBz3dB5oXmrfOzn","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T10:15:02.969Z","updatedAt":"2026-06-18T10:15:02.969Z","reported":false}}],"$L5f"]

Suggested for you