Twitter button.

Here is a Twitter button that I did with Photoshop CS2 and that you can use on your website or blog to drive users to your Twitter profile!

Twitter is a social networking service, where members can inform each other about “what they are doing” or “what they think“. It’s a little bit like sending sms but in broadcast! It’s possible to send messages via phone, instant messaging or the Twitter website. Other users (twitters? :) ) can receive updates via web, IM, or SMS.

Ok now the buttons. It actually took me 5 or 10 mins only to do them. I created the button from zero using a round shape and playing with the “Blending options” of the “Layer style”. Then I just added the t letter making it similar to the one from the twitter’s logo.

Buttons

Here are the 120×120 and 70×70 pixels versions of the Twitter button with a transparent background that you can place on any background color of your website:

120x120 transparent

120x120 transparent background

70x70 transparent

70x70 transparent background

Buttons are free to grab but please leave some feedback if you are using it! ;)

Instructions

Due to the number of requests received, I’ll also explain here briefly how to use the button on your website:

  1. Upload the button image above to the server where your website is hosted or to a 3d party service as Twitpic.
  2. Get the URL of the image, that is the link to the image location.
  3. If you use Twitpic, after you upload the image you can click on “Put this photo on your website” and you’ll get the following code:
    <a title="Twitter button 120x120 pixels - MilkAddict on Twitpic" href="http://twitpic.com/1ebqu7"><img src="http://twitpic.com/show/thumb/1ebqu7.png" alt="Twitter button 120x120 pixels - MilkAddict on Twitpic" width="150" height="150" /></a>

    You can modify this for use on your website. You need to set the image size to for example 120×120 instead of 150×150 and to change the link of the image to your own twitter account. Here is an example with my Twitter account link:

    <a title="MilkAddict Twitter account" href="http://twitter.com/milkaddict"><img src="http://twitpic.com/show/thumb/1ebqu7.png" alt="Twitter button 120x120 pixels - MilkAddict on Twitpic" width="120" height="120" /></a>
  4. In case you host the image on your own website simply get the link to the location where the image is and add the link to your twitter account. Again it will look like this:
    <a title="MilkAddict Twitter account" href="http://twitter.com/milkaddict"><img src="http://your_website_address.com/images/button.png" alt="Twitter button" /></a>
  5. Include the html code above in the place on your website where you want the button to appear!

Featured on

My button is featured on the following websites:

Do you like this? Check out also my other Social Networking buttons!

Share
Tagged with: appartbadgebuttondesigndownloadguestsiconimageinstagramlinknetworkingphotoshoppngsocialtwittwittervisitorswebsite
 

156 Responses to “Twitter button.”

    I like it very much ; work good , very cute lol and simple , thank you so much !!

  1. Great button, very stylish – thank you

  2. Thanks so much for the Twitter button! Great for my eportfolio

  3. Nice buttons and thank you for the html code. I am looking for a the code to twitte a page on a site that I like. But can’t find it.

  4. thanks! but the background of the image got black!

  5. @ Fantasy Land, the file has a transparent background. .png If you re-sized it and/or saved it in a different format: .jpg it will no longer have a transparent background, and will take on the editing program’s default or set background color. Keep it a .png and it should remain transparent.

  6. Great sharing.Very nice twitter button.Thanks

  7. thanks for sharing, cool button!

  8. Lovely buttons :)

  9. You saved my life, thank you thank you thank you!

  10. thanks a million!

  11. awesome thanks buddy

  12. Thankz for sharing mate.. :-)

  13. Hmmmm…. will try the code in my blog for sure…
    Lets See what it look likes in mine…
    Btw thanks for the post

  14. thanks for the great twitter button

  15. My pleasure Helena! :)

  16. great……i will use that button..:D

  17. Thanks for the great twitter button.

  18. Thanks For The Sharing Mate :D

  19. Thanks for that, looks sweet.
    I have it on my contact page now.
    Cheers

  20. useful button but can you tell me how it work if i use with joomla site

  21. Hi! Super pretty button! where on my twitter account shall I add the link of the image from my webpage?

    E

  22. Hi! Thanks for you comment :) I am not very familiar with Joomla, but you can check my instructions here, you should be able to display the button as long as on Joomla you can add some html code in the place on your website where you want the button to appear! :)

  23. Thanks Elenore! very nice website ;) not sure I understood correctly what you are asking, but the instructions to use the button are here on my website. You should link the button that you place on your website to your Twitter account, for example https://twitter.com/milkaddict :)

  24. Thanks:) I´m sorry but my skills does not cover this at all..hm.
    Where on my twitter account is there space for adding a link like this? On my profile or as a tweet or any other place? Cuz I guess it should be somewhere not visible to my followers.. Also I´m not able to change the link of the button on my webpage (when saved) to my twitterlink.. I´m not sure if you are able to help me but I can always ask I guess..

  25. Right… I got it now! Time to find your nice fb-button too

  26. Thanks! I really like the img… it would have been really nice to have one in similar style for facebook though!

    Thanks again

  27. Hi! Thanks :) I have also a Facebook button, and many others.. please check the Buttons page here on my website! :)

  28. Awesome! Thanks!

  29. Awesome

  30. Thank you so much – this worked perfectly. Very happy.

  31. stephanie says:

    Awesome! Thanks!

  32. [...] schönen Orbit mit dem t bietet bei Milk Addict Viel Freud beim Twittern und ich freu mich, wenn Du es einfach [...]

  33. JC says:

    Thank you so much – this worked perfectly. Very happy.

  34. -->

Leave a Reply