Skip to content

cta-patterns-guide.md

Latest commit

 

History

History
111 lines (96 loc) · 7.61 KB

cta-patterns-guide.md

File metadata and controls

111 lines (96 loc) · 7.61 KB
Raw

Let's wrap up the media blocks with the Social Icons. Since these are usually the "final handshake" with your user, they need to feel like a reward for scrolling—tactile, reactive, and undeniably funky. Social Icons: 5 High-Energy Style Variations1. The "Gooey Liquid" (Organic)

  • Visual: Icons sit in a row of soft, blurred "blobs."
  • Interaction: When you hover between two icons, the background "stretches" and snaps between them like digital lava-lamp wax.
  • Best For: Portfolio footers and Podcast guest links. [1, 2]
  1. The "RGB Ghost" (Glitch)
  • Visual: Simple white or black icons.
  • Interaction: On hover, the icon splits into three layers (Red, Green, Blue) that vibrate slightly out of sync.
  • Best For: Video pages and Cyber-Tech posts. [3, 4]
  1. The "3D Clay" (Tactile)
  • Visual: Oversized, pillowy icons with deep inner shadows and high-gloss highlights.
  • Interaction: The icon "depresses" into the page (scales down 5%) when clicked, with a soft bounce-back.
  • Best For: Events and Creative Pages. [5, 6, 7, 8]
  1. The "Monospace Label" (Brutalist)
  • Visual: No logos. Just raw text in brackets: [ TWITTER ], [ INSTA ], [ BEHANCE ].
  • Interaction: On hover, the brackets expand and the background fills with a solid neon block.
  • Best For: FAQ sidebars and Technical Posts.
  1. The "Spinning Vinyl" (Interactive)
  • Visual: Icons are housed inside circular "records" or coins.
  • Interaction: The icon spins rapidly (360 degrees) on hover, and the brand's primary color (e.g., YouTube Red) bleeds out as a glowing aura.
  • Best For: Podcast links and Hero sections. [9, 10, 11]

Moving to the Patterns Dev Tool: CTA (Call-to-Action) Now that we have the "bricks" (blocks), we need the "Power Patterns." These are 10 full-width sections designed to drive a single, high-stakes action. [12] CTA Patterns: 10 Styles

  1. The "Sticky Bottom" Strip: A persistent, 80px tall bar that stays at the bottom of the screen with a scrolling marquee CTA and a single massive button.
  2. The "Full-Bleed Video" Punch: A background video loop with a "Window" button (Style 19 from our button list) in the dead centre.
  3. The "Giant Typography" Lead: No images. Just a heading (Style 18: Video Mask) that takes up 80% of the screen, with the button following the cursor.
  4. The "Newsletter Sticker": A floating card that looks like a physical post-it note stuck to the corner of the section, using a "Hand-Drawn" form theme.
  5. The "Split-Screen" Duel: Two contrasting buttons (e.g., "Hire Me" vs "See Work") taking up 50/50 of the screen with a diagonal divider (Divider Style 06).
  6. The "Interactive Puzzle": Users have to "drag" an icon into a target area to unlock the "Sign Up" button—high friction, but high engagement for a "funky" brand.
  7. The "Floating Island" CTA: A glassmorphism card that floats over a parallax background image, shifting as the user moves their phone/mouse.
  8. The "Censored" Reveal: A CTA where the text is hidden behind "Redacted" bars that disappear only when the user hovers over the button.
  9. The "Countdown Pressure": A CTA focused entirely on a retro-digital countdown clock, with the button pulsing in sync with the seconds.
  10. The "Bento-Action" Grid: A grid of 4 tiles; 3 show "Success Proof" (Testimonials) and the 4th, largest tile is the "Action" button. [13, 14, 15, 16, 17]

The Patterns Dev Tool Interface

  • "Mobile First" Toggle: Every CTA pattern should be tested for how it stacks on a 390px width screen.
  • A/B Color Swapper: Instantly flip the colors of the CTA (e.g., "Neon on Black" vs "White on Neon") to see which pops harder. [18, 19, 20]

Next Step: Shall we detail the Hero Section Patterns (10 styles)—the "Front Door" of your website—to see how we greet users in this wild universe?

[1] https://medium.com [2] https://upmostly.com [3] https://www.youtube.com [4] https://prismic.io [5] https://tinycoastdigital.com [6] https://www.deesignre.com [7] https://www.manypixels.co [8] https://blogs.purecode.ai [9] https://www.uinkits.com [10] https://bezcieniowa.pl [11] https://blog.logrocket.com [12] https://realrashid.medium.com [13] https://arounda.agency [14] https://unbounce.com [15] https://www.intentwise.com [16] https://community.lucid.co [17] https://www.reddit.com [18] https://www.linkedin.com [19] https://www.klientboost.com [20] https://www.superside.com