Skip to main content

Button

Use Button for a clear call to action: open a URL, trigger a modal, show hidden content, copy text, send visitors to checkout, or attach tracked click behavior.

How It Works In Atomicat​

The content drawer edits the button label, click event, optional random redirect links, icon, icon size, and icon gap. Button style controls include alignment, normal and hover states, text color, gradient or solid background, animation, typography, border, radius, shadow, padding, width, and responsive values. Button settings can also include click-based pixel tracking when that tracking option is enabled for the page.

When To Use It​

  • Send visitors to checkout, another page, a modal, or a revealed section.
  • Create primary and secondary CTAs inside hero, offer, pricing, and form sections.
  • Add an icon before or after the label when it improves recognition.
  • Use random redirect links when a tested funnel needs to split clicks between several destinations.

Configure The Element​

  • Write a direct label such as Start now, Get my discount, or Continue.
  • Choose the click event: link, modal, custom modal, show item by ID/class, clipboard, or supported checkout behavior.
  • For random redirects, add each destination URL and test that query parameters pass as expected.
  • Add an icon only when it reinforces the action; then set icon size and gap.
  • Style normal and hover states separately so the visitor gets clear feedback.

Testing Notes​

  • Click every CTA in preview and on the published URL.
  • If pixels are attached, verify the click event in the ad platform test tool.
  • Test mobile width and touch target size; full-width buttons often work better in narrow sections.

Limitations And Tips​

  • A Button should have one main job. If it both explains and converts, move the explanation into nearby text.
  • Random redirects are useful for tests but can make support harder if destinations are not documented.
  • Hover animations do not help touch devices, so do not rely on hover alone to communicate state.

FAQ​

What actions can a button run?

A button can open a link, trigger a modal, show hidden content by ID or class, copy text to the clipboard, or use supported checkout behavior when configured.

Can one button choose between multiple URLs?

Yes. When random redirect links are configured, Atomicat can send clicks to one of the saved destinations.

Can buttons fire pixel events?

Yes. Button clicks can be tied to pixel events when the page tracking setup and button settings support that event.