A contact button with a bit of life

Contact buttons are odd things. They're by their very nature utilitarian, acting as a bridge between someone simply reviewing a site to engaging with its creator and as a consequence are a key stepping stone to forming a relationship.

That said, many contact buttons are simply very boring and at worst annoying to interact with (and I'm bucketing my previous contact button in that camp). Aside from the buttons that are mailto, opening the unused Mail macOS app, these elements of a site are often forgotten.

The previous iteration of the contact button had a couple of things wrong with it. Firstly, the text-only formatting conflicted and drew attention away from the rest of the top navigation, secondly there is an absence of animation, the tooltip of my email just appears rather abruptly and lastly the color styling of the tooltip — I knew this had to change, as just looking at it made me cringe.

Overall the new button is more subtle as well as seamlessly outlines its actions through an animated state. The subtlety of the contact button is really being carried with the icon-only formatting as well as lightening the background color.

I always want to add fun into an interface where it's appropriate. Here, I've sprinkled this into the envelope icon morphing between an open and closed state (with this animation being active when navigating across the site rather than it suddenly being removed).

I've always loved the fun randomized language that Claude Code uses to describe an action. So I injected some of these into the content of the tooltip — who knew there were so many words to describe “copy”!

While taken together these changes are small, it's the tiny details that add up to delivering a delightful solution.