I Made This: Custom Pin It Button

Hey Friends,

I’m in the final tweaks of my blog redesign and am pounding out the details, one of them being a pin it button hover. A lot of people just use the generic Pinterest button and call it a day, but I know I can do better than that, so I did some research about custom pin it buttons to see what was out there.

Literal Pins

Style Me Pretty: I dig the transparency of this, plus the little pin. The colors match their branding too!

Screen Shot 2014-01-17 at 8.52.10 AM

Design Love Fest: Nicely Branded, large, completely custom

Screen Shot 2014-01-17 at 8.36.32 AM

Breanna Rose: Love this! Clean and simple, and unobtrusive.

Screen Shot 2014-01-17 at 8.34.20 AM


Inspired to Share: Simple outline treatment, bottom corner placement (probably wise with regular her use of tall images)

Screen Shot 2014-01-17 at 8.50.12 AM

Creative Index Blog: I have a full on crush with this blog. I like the simplicity of a black circle dead center.

Screen Shot 2014-01-17 at 8.36.09 AM



Eat Drink Chic: Very Bold. Definitely Noticeable. Nice contrast with Yellow Branding

Screen Shot 2014-01-17 at 8.47.47 AM


A Spot of Whimsy: Nice little treatment. Unobtrusive, but still elegant and noticeable.

Screen Shot 2014-01-17 at 8.55.45 AM

Band.Do Blog: This is so cool. I like the idea of the whole image changing color.

Screen Shot 2014-01-17 at 8.43.27 AM


I notice that circles are very popular. While these are absolutely lovely, I was looking for something that actually goes along with my theme a little better. They are a little too perfect, a little too flat for this “mixed media” approach I’m taking.

It wasn’t until I saw what blog did on their images with a complete colorized hover and the words “PIN IT” large and in charge that I realized what I wanted to do. I wanted to continue that painted feeling, so I created a “pin it” script of my own with   my sumi brush. Here’s what I’ve come up with. I’d love your thoughts! (Also, I updated the header. I like this better)



For more information about pin it button best practices, check out Zoe Rooney’s article about Six Tried and True WordPress plugins for social media. She brings up some good points that you should consider when designing your custom button.



  • A little bit of my #process on designing a custom #pinit button for my #redesign

    20 January, 2014 at 11:40 am
  • Zoe

    Love all the research going into this :) I would say that while I really like’s (and am partially responsible for making it happen, hah), the really dramatic effect may not be what you want because it obscures the image when someone is rolling through the post. Theirs has the dramatic color shift but the text of the button actually doesn’t cover up a whole ton of the image so you can still see the image itself. I’d worry with your mockup that it’s blocking too much of the image.

    And as a technical aside, centering vertically is actually next to impossible – we can center left to right but typically it’s best to stick to a set distance from top or bottom.

    20 January, 2014 at 11:45 am
  • Such a fantastic roundup! I love the lettering on your mock up. It’s definitely original and stands out to me among the others.

    24 January, 2014 at 1:01 pm