Free Pretty Pin it Buttons + Tutorial

BY Wita | 18/01/2013 | Blog Biz
Sharing is Caring Email this to someoneShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Lately you might see quite a number of blogs with Pin it Buttons for individual images that enables you to click and pin the certain image straight away on Pinterest. If you have not, just hover on images in my other posts (I have disabled them in this post).

There are quite a few WordPress plugins for Pin it buttons on individual images. However, the buttons are usually the original buttons or logo of Pinterest. Today I’m sharing with you 9 pretty Pin it buttons that you can download and use for free (+tutorial on how to install them after the jump at the very bottom of this post!)


Here’s an example of what one of them is going to look like on your images


 Download the buttons and the plugin, and instructions on how to install them after the jump!



 Click the download link above to download a .zip file containing 9 .png button files. I am using (self-hosted wordpress) as my blogging platform. I don’t think these buttons and the tutorial is going to work for, and I don’t know how to install them in other blogging platforms. You might want to ask an expert.


These buttons are free, and so is supporting this blog : ) Please support Design is Yay by sharing this post on facebook, twitter or pinterest.
Click one of the share buttons below this post. Thank You!


All photos and artwork are © Wita Puspita for Design is Yay. The images or documents you download in this article (or across my entire blog) are free for personal use only. Please do not use them commercially. If you re-post or re-use them in any way for your site or blog, please credit my blog. If you would like to use the printable for any commercial projects of yours, please ask for my permission first. Thank You!

So this is my first tutorial. I hope I’m doing it right. In case I make some mistakes, feel free to politely and nicely let me know at the comments section below ;)

Also, a little disclaimer, I’m not a programmer, web developer, or a web-designer. I have really really basic knowledge about CSS and HTML and other stuff like those two. So the tutorial below might not be the best way to do it, but this is what works for me. If you know a better way, please use your way. I am not an expert. 

After downloading the buttons file and extracting them from the .zip folder, follow these steps.

First, Download and install jQuery Pin It Button For Images to your

Update: Good news! the jQuery Pin It Button For Images plugin author has updated the plugin. The latest version (0.9) enable users to upload their own buttons and set everything up on the plugin page! That means, no coding whatsoever needed!

So, after downloading and activating the plugin, here’s what you do:

1. Upload the button png file of your choice into media file, copy the URL

2. Go to the jQuery Pinit Button for Images plugin settings. Which is located on the left sidebar, Under “Settings” tab. When you hover, there will be jQuery Pin It Button for Images link that you can click.

3. On the plugin settings page, click to select the “use custom pinterest button” option. 

4. Underneath that, paste the URL of the button image. Set up the Height and Width px in the boxes (You can find the size of your uploaded button on the image chart included in the zip folder)

5. Click Update Settings

Done! How easy is that??? 

Preview your site, and you should be able to see you pretty Pin-It Buttons now! :D

If there’s any question, feel free to comment below, or contact me!



  • What a great idea. Just adorable, I´ve pinned this one on pinterest.

  • Thanks!! I had been looking for a tutorial like ths! I will try it (:

  • Hello, thanks a lot for the detail step by step instructions. This really helps for a webtech newbie like me!
    The buttons are really cute

  • Hello, thank you so much for the step by step instructions. This really helps a webtech newbie like me.
    And your buttons are really cute too! :D

  • Wita

    Thank You for all the nice comments :) I’m a newbie myself when it comes to stuff like this, so I did a lot of researches, trial n error, too! If there’s any questions or problems with the installation feel free to contact me!

  • Oh thank you so much. This is so nice freebie and tutorial!

  • ben

    Been looking for a hour now, can’t find
    background:transparent url(‘../images/pinit-button.png‘) no-repeat 0 0;

    Not sure if I’m blind or if my eyes are just hurting from staring at code.

    • Wita

      Hi Ben,
      are you sure you’re at the jQuery-pin-it-button-for-images editor, and not the general site editor? and also make sure you choose jquery-pin-it-button-for-images/css/style.css under plugin files on the right hand site.
      the codes under that .css file should be:

      .pinit {
      overflow: hidden;

      .pinit .pinit-overlay {

      .pinit .pinit-overlay a {
      margin:20px 0 0 20px;
      background:transparent url(‘../images/pinit-button9.png’) no-repeat 0 0;

  • These are so cute! Do you know if you can do something like this on Blogger? Or will it only work on wordpress? Thanks!

    • Wita

      Thank You :)
      the buttons can be used for ANY platforms. However, I don’t know how to install them into your blogger blog/site, because in this tutorial I am using WordPress plugin. If you ask around to people who are good in programming, I am sure you can use them for blogger blogs too. Good luck!

  • ben

    ah yea found it, got it going now, but when i do it and update it still has the .css as inactive and the .php file as active, how do i activate the .css file?

    • Wita

      I’m not sure what you mean by inactive. so you mean it’s not showing on your blog?
      anyway, since I used a plug in in this tutorial, maybe you can ask the plugin author (here: ) regarding more technical questions. I’m not very experienced in css, what I wrote in this tutorial is what I have tried (with lots of errors) and worked for my blog. So I’m not very technical, sorry :(

  • I love these! Thanks for sharing xx

  • How cute are these buttons!!! Thanks so much for sharing! And for your well-explained tutorial, it is very easy! The only problem I am encountering now is that I don’t have access to the file folder of my host (which is Guess I will have to ask someone technical enough to solve my problem… :-)
    Anyway, just wanted to thank you for the supercute buttons!
    Love, Inge x

  • Wita

    Hello Everyone! the jQuery pin it button for images plugin author has updated the plugin, and you can now easily change the buttons with no coding whatsoever!
    So if you have already downloaded the plugin, please update it from the plugin page.
    If you have not, download the latest version
    You can view my updated instructions on this post. Thank You!

  • Hi there!

    This is a wonderful tutorial and I love your site… question – do you have a tutorial for blogger?

    Thanks so much!


    • Wita

      Thank You :)
      Sorry, I’ve never had a blogger blog so I don’t have any tutorial for blogger users.
      However, this blogger does.
      You might want to follow her instructions, but you can still use my buttons if you want!
      Thanks for visiting my blog

      • Hi Wita! Thanks for the mention :) My code for Blogger doesn’t accept custom buttons, it calls the official button provided by Pinterest. Unfortunately, there’s no easy way to do custom Pinterest buttons on Blogger.

        • Wita

          oops, sorry Marie. I didn’t know that. Love your blog btw :)

  • Pingback: Das Wochenende, ein neuer Pin-It-Button & ein neuer Hintergrund()

  • It worked perfectly!! Thank you so much! And thank you for making is so easy to understand for us “non coders”! I just love the pretty new Pin It button!


  • Beautiful pin buttons. I am planning on using them for my new website Please let me know if that is ok.

  • Pingback: January Reviewed - Design Is Yay !()

  • I’m so glad I chanced upon your site! Your step-by-step was incredibly easy to follow and your buttons are adorable!

    I’ll definitely be sharing! :-)

  • Thank you soooo much!!! This was super easy to accomplish!

  • Love it! Thanks for the free and super cute pin it buttons!

  • Thank you so much! I am so excited! That teal perfectly fits my blog!

  • Thanks so much! These are beautiful and the tutorial was much appreciated for a newbie blogger like me!

  • Pingback: Blogging series: Camera gear and blogging tools | Another House Blog()

  • Mikiki

    Omg i love your website! Your website is the first blog website added in my bookmark.
    Please teach more tutorial! Xoxo

    • Wita

      Thank you! I would love to do more tutorials!

  • Pingback: Adding A Pinterest Pin It Button to Your Wordpress Blog()

  • Clara

    How do you find the “plugins” menu in wordpress? I want to download the Pinterest plugin and use it but I can’t find out how to upload it.

  • Laura P

    I love these pin it buttons! I just want to be clear, for personaI can use means I can use these buttons as hover images on my blog as long as I credit you & do not try to resell the images themselves. Is that right?

    • Wita

      Hi Laura,
      Personal use means you cannot earn any money from the buttons, but you definitely can use it for your money-earning blog and business website. Thanks for asking!

  • Emily

    Oh my goodness I’ve been stressing about doing this for MONTHS and I just found your tutorial and completed the entire thing in 15 minutes! It works beautifully and perfectly! Thank you thank you thank you!

    • Thanks again Emily! I’m so glad this still works really well despite of the plugin updates :)

  • Thank you for this tutorial and the free pin it buttons Wita!! Very easy to follow and it looks great. Thank you ^_^

    • Thank you Ina :) See you at the Bloggers meet up this weekend!

      • Ina J

        Yes! see you this weekend! Looking forward to meet you and other bloggers in Canberra

  • Hi Caymun,
    I am actually not sure about blogger, as the plug in that I mentioned in the tutorial is a wordpress plug in. I hope you can find a tutorial for blogger users!

  • Steph

    Thank you so much for this and for the tutorial!! Big big love!!