Skip to content

component

Paper Button

By Karim Saif

Details

Summary

About Paper Button is a flat, sharp-cornered CTA button with a paper texture fill that animates on hover, giving it a tactile, physical quality that stands out from a standard…

Description

About Paper Button is a flat, sharp-cornered CTA button with a paper texture fill that animates on hover, giving it a tactile, physical quality that stands out from a standard button. No rounded corners, no gradients — just a clean, editorial shape with a texture-driven interaction. What it does The button uses a full-bleed paper texture image as its background, layered behind the text. On hover, the texture animates to create a paper-like movement effect — making the interaction feel physical and intentional, like pressing something real. The sharp zero-radius corners reinforce the raw, editorial aesthetic. What you can customize Full control from the Framer panel: button text, text color, animation intensity, and animation speed. The texture and interaction are built in and ready to drop into any layout without touching code. Great for (examples) Use it anywhere you want an interaction that feels material and handcrafted: * editorial and creative landing pages * portfolio and agency websites * brutalist or print-inspired layouts * hero section CTAs * product and launch pages * SaaS websites with bold aesthetics * personal brand sites * Framer template previews Share your build If you ship something cool with it, post it on X and tag me @karimsaif0 , or send it over. I would love to see what you create. Need help? Questions or feedback? Reach me anytime: karimsaif010@gmail.com or on X @karimsaif0

Introduction

A sharp-edged button with a paper

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300130208/148/228/309/79/15
  • All · #2812