Twitter button. « Buttons

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 background

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:

Upload the button image above to the server where your website is hosted or to a 3d party service as Twitpic.
Get the URL of the image, that is the link to the image location.

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>

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>
```
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!

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

AMine says:

October 16, 2010 at 10:14 am

Great button, very stylish – thank you

Jo Gutmann says:

November 3, 2010 at 9:16 pm

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

Hilary says:

November 22, 2010 at 9:30 pm

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.

Fantasy Land says:

December 25, 2010 at 10:56 pm

thanks! but the background of the image got black!

li says:

February 8, 2011 at 3:32 am

@ 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.

Tim says:

April 11, 2011 at 9:26 pm

Great sharing.Very nice twitter button.Thanks

Mark says:

May 24, 2011 at 10:28 pm

thanks for sharing, cool button!

Anita says:

June 14, 2011 at 11:23 pm

Lovely buttons

Julie Russell says:

June 28, 2011 at 9:47 pm

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