That Tear-Off Tab Copy Button Effect

I added a “copy to clipboard” button to my site’s code blocks back in February. It works as you’d expect, except for one detail. Instead of the usual icon or color change to communicate when the copy succeeds, it mimics those tear-off tabs you sometimes see on paper flyers stuck to telephone poles and bulletin boards. Here’s a video: You can try it out in any post with code blocks, like this one, this one or even this one. Oh look, here’s one now: Language: HTML<blockquote> <p>I am just a copy of a copy of a copy</p> </blockquote> Originally, the button tore from the bottom like on a real-life flyer. But I found a visible scrollbar on overflowing code disrupted the effect too much, so I moved it up. I almost abandoned the idea at that point, but after some encouragement from friends and colleagues, I got over myself and accepted the compromise. (I recently saw Marcin Wichary share a cool responsive code formatting idea via Jake Archibald. If I ever decide to implement something…