How To Create A Set Of Stylish Social Bookmarking Buttons

As a first tutorial here on Raster Rebels I would like to start out with something that everyone can enjoy and use. If you are a blogger and don’t like those pesky, always so ordinary, social bookmarking buttons this tutorial is absolutely for you. Within this tutorial you will be able to change and create just the kind of stylish button that you would like and to fit your own blog. But, in this one I am going for an all colored up set of buttons that could possibly grace whatever blog and even bring up the quality of it a bit.

In this tutorial you won’t be needing any pre learned skills more than the knowledge of how to use the most common tools in Photoshop and the mouse. We will however go through some CSS and HTML code at the end of the tutorial in order to set up the buttons to get them working. But I will take you through that part each step of the way so there should really not be anything to worry about.

This particular set of bookmarking buttons will include 5 of the most common Social Bookmarking sites. If you want to have less or more that’s entirely up to you but for this one I am going for 5. Adding more buttons is quite simple and really just entail creating a few more. The coding is still the same for each button. However, a word of advice when you create more of them. Make sure you measure the width of the particular space you want your bookmarking buttons to end up. Otherwise you might have to go back and redo a big part of the design work.

Alright, enough about that now. Let’s begin the tutoring and create those shiny buttons.

Step 1 – Setting Up The Work Area

The first thing you have to do (besides starting up your Photoshop) is to create a new work area where we can create our graphics. I have chosen a size of 625 pixel wide and 300 pixel high. This will ensure that I have enough workspace to work on. I usually measure the text space (the actual area where text is able to be published) on the blog I am doing social bookmarking buttons for as that will make it aligned and look quite nice.

I will be using the entire width but not the entire height. This is only to give a bit more visual area to work with. I will go ahead and crop the image down once I am done with all the buttons.

Depending on what color your text area has on your website choose the background color that you have in order to easier decide what colors of the buttons work best for your site. I will be using a White (#FFFFFF) background as my text area is white.

There, now we have our work area set up.

Step 2 – Creating The Foundation For The Button

As we want to have the buttons span all the way from the left side to the right we want to use the entire width of the work area. And as we want to have 5 buttons we need to calculate the width each button should. This is all simple math. 625 (Width) / 5 (Number of Buttons) which is 125 pixels wide. So each button should be 125 pixels wide.

I want the buttons to be fairly thick as well to be able to fit some necessary information on there like the name of the Social Bookmarking Service as well as some encouraging message to get the visitor to really get tempted to use it. So I have decided to make the buttons 60 pixels high.

Now that we know the width and height of the button all we need to do is to create the foundation for them. Pick the “Rectangular Marquee Tool” and create a selection that is 125 pixels wide and 60 pixels high. Doesn’t really matter at this point where you create the selection as we will move and copy the finished button later in order to create another 4 buttons.

Before we fill this area we need to create a new layer in order to make sure the button doesn’t mesh together with the background. So go ahead and create a new layer called “Button” with the button at the bottom of the layers window.

With the selection still in place pick the “Paint Bucket Tool” and then choose a color you wish your button to be. I am going with a Black (#000000) foundation for the button as that will blend and still look quite eye catching on the White background that my site has.

Fill the selected area with the chosen color and then de-select the area by picking the “Rectangular Marquee Tool” again and clicking outside of the selected area. You should now have something that looks like this:

Step 3 – Adding Realistic Effects

We have our button foundation and it’s time to create some effects that makes the button “pop out” a little. Select the “Button” layer and right click it to bring up a menu. In the menu click “Blending Options…“, a new window will open where we will insert our effects.

Click the “Bevel and Emboss” checkbox and then click that tab to bring up the panel. To create a little bit more realistic button we are going to add some volume to the it. Insert these settings:

We now have a button with a little but of body and shine to it which later will play a part in the overall realistic look of the button. Now we shall add a little more shine to it in order to simulate a glossy surface. Click “OK” to close the window with the settings we’ve just entered.

Create a new layer on top of the “Button” layer and call it “Shine“. Now, again choose the “Rectangular Marquee Tool” and select the entire button foundation. We will fill this area with White (#FFFFFF) color to simulate the shine. Next change the “Opacity” to 20% for the “Shine” layer which will reveal the bottom black foundation.

Now select the “Elliptical Marquee Tool” and select most of the button leaving only a portion of the left side and top corner unselected leaving you with something like this:

Press the “Delete” key to delete the selection only leaving you with a portion of a corner left. As you can see we are slowly simulating a glossy surface on the button. It will further pop out when we add some text and graphics to the button.

Let’s create the other five buttons by copying both layers so that we get exactly the same button and shine layer five times. All you have to do is to select the “Button” layer and then select the button foundation using the “Rectangular Marquee Tool” and then click “CRTL“+”C” to copy and then “CRTL“+”V” to paste it. You will get several layers so don’t forget to name then after the Social Bookmarking Service you intend for them to be connected to. Even the first button we created.

After you have copied the buttons and created 4 more buttons exactly the same you should now have something looking like this:

For you to understand the layer structure I have also included the layer view. As you can see I have also copied the effects we created in the “Blending Options…“. You can easily do this by right clicking the first button foundation we created and select “Copy Layer Style“. All you have to do now is to right click all the other 4 button foundations and select “Paste Layer Style” and they should get the exact same properties as the first one.

One thing to remember is that the top button layers should be for the button on the farthest left side of the working area. Then working it’s way down as the buttons are added all the way to the right. Right being the bottom layers in the layer structure.

Now what we have to do before we add a reflection to the buttons is to add some shadows. The shadows will create a nice separation line between the buttons to create a sense of order and control. Right click the top “Button” (mine is the “Digg Button” layer) layer and again select “Blending Options…” and when the window opens check the “Drop Shadow” checkbox and click the tab to get in to the settings. Now add the settings below and click “OK“.

Don’t worry about the shadow going outside the buttons at the top and bottom of the button. This will all be fixed when we crop the buttons to the right sizes later. Now copy that top “Digg Button” layer settings by again right clicking the button layer and select “Copy Layer Style” and paste it to all the other button layers but the farthest to the right (which is the bottom of the stack) by right clicking on them and selecting “Paste Layer Style“. When done you should have something looking like this:

There, our buttons are now stacked and looking quite promising. But, we could need a little more attention to the separation of the buttons so let’s create a little line at the end of each button but the last in the stack (the one farthest to the right). Pick the “Rectangular Marquee Tool” and select the right edge of the top button layer (“Digg Button“). make the selection 1 pixel wide and 60 pixels high. Now, select the “Paint Bucket Tool” and choose a middle Gray color (#1D1D1D). When done you should have something looking like this:

Now what we have to do is to add some reflection to the buttons, Something that will make them look a bit more real before we add all the graphics and texts. I am using a black and white photo I took in my studio. You could really use whatever photo you want, Color or Black and White, it’s really up to you.

Load your photo and select a 625 pixel wide and 60 pixel wide section of the photo using the “Rectangle Marquee Tool“. Copy the selection by pressing “CRTL“+”C” and then go back to your buttons session. Select the very top layer (in this case it’s the “Digg Button – Shine” layer). Then press “CRTL“+”V” to paste your selection into a new layer that will end up above the top layer.

Name the new layer “Reflection” and set it’s “Opacity” to 6%. Now align that new reflection exactly over the buttons. When done you should have a slight reflection like effect on the buttons really making them look like they are not created from the same mold. When done you should have something looking like this:

Our button structure is now done and we can move on to adding the graphics and text that will make the buttons stand out even further.

Step 4 – Graphics & Texts

Time to add the graphics and the texts to the buttons. I have, as said in the beginning of this tutorial, five of the most popular Social Bookmarking services to link up to. What you choose is really up to yourself and what you think is best for your site. Content and spread is what it’s all about when choosing what way to spread the word. I have chosen these (if you haven’t yet seen it in the layers structure):

• Digg
• Buzz
• StumbleUpon
• Twitter
• Delicious

What I need now is the icons for these services to incorporate them into my buttons. Icons for each of these services can most likely be found on their own sites but you could also use Google to find the logos that you are searching for. Just make sure you get a normal size logo so you don’t have to blow it up in order for it to fit cause that will totally ruin the look of the button. Better sizing them down and using the “Filter > Sharpen” tool get some of that crispiness back. Here are the logos I have chosen (I have already sized them down to the size I want them to be here):

Alright, now when we have those icons prepped and ready to go on the buttons why don’t we start by adding the “Digg” icon to the “Digg Button“. Copy the icon, again using the “Rectangular Marquee Tool” to select them and then press “CRTL“+”C“. Select the “Digg Button” layer and press “CRTL“+”V” to paste it in. It will end up in a layer in between the “Digg Button” layer and the “Digg Button – Shine” layer. name the new layer “Digg – Icon“.

What we have now is the graphics of a Digg Icon looking like it has a shine on it. But, let’s further style it. With the “Digg – Icon” layer selected go the menu and click “Edit > Transform > Rotate” and rotate the icon 45 degrees clockwise. After adding the icon to the re-sized it to 75% of the original size in order to make it more visible on the button. You do this by selecting the layer and the go to the menu and pick “Edit > Transform > Scale” and add 75% in each of the “W” and “H” edit boxes at the top of the screen.

Position the newly rotated icon at the far end of the “Digg Button“. We have to contain the icon so it doesn’t spread outside of the button and that we do easiest by right clicking the “Digg – Icon” layer and selecting “Create Clipping Mask“. The icon will immediately pop inside the button and be contained. Now repeat this with all the buttons and when you are done you should have something looking like this:

We’re starting to see where these buttons are heading. We need to add some text as well in order for the visitor to see what the buttons really do. It’s more of a reassurance that they know what the icons represents.

Select the “Digg Button” layer and then pick the “Horizontal Type Tool“. You decide yourself what font you want to use but I am going to go ahead and use “Franklin Bold Heavy” with the font size set to 16. This makes for a nice neutral and strong look of the text. I am also choosing the color White (#FFFFFF) for the text but this entirely depending on what color you have chosen your buttons to be.

Now type “DIGG“, with capitals, on the black area on the “Digg Button“. We also want to encourage our visitors to click this button so lets add a smaller “THIS” to that text. Use the same font but make the size 9 instead. Also set the letter spacing to 200 in the “Character” option located to the right side of the screen.

Repeat these steps for all the buttons and when you are done you should have something that is looking like this:

Our buttons are now finished and they are looking quite crisp. We however need to add one more thing before we can move on to create animated buttons out of these. We need to add a little glow inside them when the user hovers over them.

Create a new layer just on top of the “Digg Button” layer and call it “Digg Button – Glow“. Pick the “Elliptical Marquee Tool” and create a circle about twice as big (177 pixel wide &  117 pixel high) high under the “Digg Button“. Pick the “Paint Bucket Tool” and Black (#000000) color and fill the circle. You won’t see the circle being filled and that’s because the layer is a masking layer. It’s not really the circle we’re after merely use it as an effect carrier.

Now right click the “Digg Button – Glow” layer and select “Blending Options…” and then also click the “Outer Glow” checkbox and also the tab to bring up the settings. Choose the color you want to use for the glow but then insert these settings:

As said, the color is up to you and if you want to change the intensity of the glow go ahead and do that as well by modifying the “Opacity” and the “Size” settings. After adding these settings to the circle effect carrier you’ve just created you should have something looking like this:

Repeat the above steps for all the Buttons. What we are doing is really creating an effect that we’ll use when we “animate” the button later in CSS. We will use to stages of the button to create the animation and the illusion that it lights up when you hover the button. What we really will be able to do when we do this is to toggle the glow effect on and off to make our intended effect.

It’s time to create the actual button so let’s move on to that part of the tutorial.

Step 5 – Creating The Button Files

Time to sort all the buttons out so to speak. What we need to do is to actually compress all the layers twice. One with the glow effect off and one with the effect on. This way we have to stages of the button which will serve it’s purpose when we hover over it.

But what we need to do first is to crop the image to only show the buttons and get rid of some unwanted shadows and white area. To do this we need to flatten all the layers into one layer. But before that we need to save it. So go ahead and save your session as a PSD project.

Now, when having done that we can go ahead and flatten the layers twice. First turn off all the glowing layers by clicking the little “eye” icon in the layers window. This will make the layers invisible and won’t end up in our image this first round.

Go to the menu and select “Layer > Flatten Image“. As you can see we now only have one layer. Time to crop the image. Choose ONLY the 625 pixel wide and 60 pixel high area where the buttons are located using the “Rectangular Marquee Tool“. Then go to the menu and select “Image > Crop“. As you can see all the area around the buttons are deleted and we end up with the buttons only. Now save this image as “Social Buttons – Active.jpg“.

Now do the same thing with the glow effect on and save the finished image as “Social Buttons – Static.jpg“. After doing this you should now have two files looking something like this:

Our buttons are now ready to be cut into smaller pieces that will form the animated buttons after we have added the CSS script to our CSS Style file.

Open the “Social Buttons – Static.jpg” file and select the first (left hand button, the Digg one) all the way to the little Gray separation line we created earlier. Again use the “Rectangular Marquee Tool” to select. Then press “CTRL“+”C” to copy your selection.

Now go to the menu and open a new session, call it “Digg Button“. Change the height of your new session to 120 pixel and then press “Ok“. We now have a new session that will fit both the Static and the Active button mode in it. Press “CRTL“+”V” to paste the static button selection that we copied. When done make sure you move the button all the way to the top.

Open the “Social Buttons – Active.jpg” file and copy the “Digg” button in the exact same way as we did with the “Static” button. Go back to our newly created new session (“Digg Button“) and paste your selection, just like with the first static button.

Move the new, active, button graphics to the bottom of the work area. You will now have the graphics for our button, all we have to do now is to save it. Save your button as “jpg” and call it “Button – Digg.jpg“. To make sure you have done the steps right, when done you should have something that’s looking like this:

Now do the same with all the 4 buttons that are left before we continue. make sure you align all the buttons just right and don’t forget to set the height to 120 before continuing. To simplify things use these names for the buttons. Always easier to put names that are directly associated with what it’s doing. If not, then you will most likely be looking around for the button and wish you had used a more convenient name.

• Button – Digg.jpg
• Button – Buzz.jpg
• Button – Stumble.jpg
• Button – Tweet.jpg
• Button – Mark.jpg

There, now when we have all our buttons cut and filed we can move on to implement them on our site and also add some flair to it. A simple animation using CSS is what’s going to bring these buttons alive.

Step 6 – Implementing The Buttons

Time to do some work on the implementation of these buttons. It’s quite simple and it will make your buttons looking really good and with just a few lines of code. We will be doing this code in our style.css file. So open that up in your favorite word processor or website editor application. Let’s start with the CSS part:

.diggrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Digg.jpg”) 0 0 no-repeat;
float:left;
}
.diggrollover a:hover {
background-position: 0 -60px;
float:left;
}
.diggrollover a:active {
background-position: 0 -60px;
float:left;
}

Now to explain the small code we have to implement. No worries, it’s quite easy and but will truly make a difference when you add buttons to your page. It’s a much faster way of loading buttons and the button won’t “stall” when you hover over it first. This occurs when the computer have to download the next phase in the animation which sometimes looks like the button stalls for a while. This way we will pre-load all the graphics for the button which when you hover over it will instantly be displayed.

Line 1: Declares a new class called “diggrollover”. It also states that the button should contain the underlying settings in it’s idle state.
Line 2: Declares how the html will be displayed.
Line 3: Sets the width of the button which in our case is 125 pixels (px) as the button is that wide. Also called in this case the visible area.
Line 4: Sets the height of the button which in our case is 60 pixels (px) as the button is that high. Also called in this case the visible area.
Line 5: Declares the image we want the button to have in it’s idle state.
Line 6: Makes sure that the button is aligned to the left of the screen. Also makes it possible to add text on the right side of the button without changing the position of the button itself.
Line 7: Executes (ends) the “Idle” state declaration.
Line 8: Declares the same class but in its “Hover” state. This means we are declaring the settings that the button should have when you put your mouse over the button.
Line 9: Declares that the button graphics (that we loaded in the “Idle” button state) should move 60 pixels upwards.
Line 10: Makes sure that the button is aligned to the left of the screen. Also makes it possible to add text on the right side of the button without changing the position of the button itself.
Line 11: Executes (ends) the “Hover” state declaration.
Line 12: Declares the same class but in its “Clicked” state. This means we are declaring the settings that the button should have when you click the button. In our case we don’t have any graphics for that. But if we wanted we could add another 60 pixels in height of our buttons and add another button effect to simulate the clicked state of the button.
Line 13: Declares that the button graphics (that we loaded in the “Idle” button state) should move 60 pixels upwards. Again, we’re using the same effect as we did in the button’s “Hover” state.
Line 14: Makes sure that the button is aligned to the left of the screen. Also makes it possible to add text on the right side of the button without changing the position of the button itself.
Line 15: Executes (ends) the “Hover” state declaration.

The core of the button’s behavior is now defined and the settings for it’s different states are inserted. All we really need to do now is to add some code that will display our buttons on our blog or website. This couldn’t be more easy and takes just a few lines of code to implement.

To add one (for example the Digg one) button we only need to add this code wherever you want your button to pe positioned.

<div class=”diggrollover”><a href=”http://digg.com/submit?phase=2&url=<?php the_permalink() ?>” target=”_blank”></a></div>

This will put your button on the position you wanted it to be and when clicked it will take you to the Digg website with the website or article you want to Digg pre-entered.

A short explanation of what the code does is quite simple:

“div” tag is to create a new division.

“class” tag is to connect the “div” tag to the correct behavior that we set up in CSS.

“a href” tag is where we want to send the user when they have clicked the button

“http://www.rasterrebels.com/tutorials/how-to-create-a-set-of-stylish-social-bookmarking-buttons/” tag is to grab the URL (website address) that is going to be shared on the spacific social bookamrking site.

“target”_blank”” tag is to open a new tab to send the user to when he/she clickes the button. This helps keeping your own site open as and not lost in all the clicking and sharing.

“/div” is to execute our division making it a closed division that can be compared to a “block“.

To set up all your buttons it only takes the same codes 4 more times and it will have them all set up. But, to help you with that and to make sure you can just copy and paste I will include all the code for the Style.css file as well as the buttons html code as well down below:

.diggrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Digg.jpg”) 0 0 no-repeat;
float:left;
}
.diggrollover a:hover {
background-position: 0 -60px;
float:left;
}
.diggrollover a:active {
background-position: 0 -60px;
float:left;
}
.buzzrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Buzz.jpg”) 0 0 no-repeat;
float:left;
}
.buzzrollover a:hover {
background-position: 0 -60px;
float:left;
}
.buzzrollover a:active {
background-position: 0 -60px;
float:left;
}
.stumblerollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Stumble.jpg”) 0 0 no-repeat;
float:left;
}
.stumblerollover a:hover {
background-position: 0 -60px;
float:left;
}
.stumblerollover a:active {
background-position: 0 -60px;
float:left;
}
.tweetrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Tweet.jpg”) 0 0 no-repeat;
float:left;
}
.tweetrollover a:hover {
background-position: 0 -60px;
float:left;
}
.tweetrollover a:active {
background-position: 0 -60px;
float:left;
}
.markrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Mark.jpg”) 0 0 no-repeat;
float:left;
}
.markrollover a:hover {
background-position: 0 -60px;
float:left;
}
.markrollover a:active {
background-position: 0 -60px;
float:left;
}

As you can see it’s the same code as we had for the Digg Button but we have replaced the class name for them as well as the graphics used for the button. It really isn’t harder than that to set up in CSS.

As for the buttons being positioned anywhere on your blog/website, all you have to do is to copy this code and place it wherever you want and it will show up all nice and cool.

<div class=”diggrollover”><a href=”http://digg.com/submit?phase=2&url=<?php the_permalink() ?>” target=”_blank”></a></div>
<div class=”buzzrollover”><a href=”<?php the_permalink() ?>&title=<?php echo urlencode(the_title(”,”, false)) ?>“ target=”_blank”></div>
<div class=”stumblerollover”><a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&title=<?php echo urlencode(the_title(”,”, false)) ?>” target=”_blank”></a></div>
<div class=”tweetrollover”><a href=”http://twitter.com/home/?status=<?php echo urlencode(the_title(”,”, false)) ?>: <?php the_permalink() ?>” target=”_blank”></a></div>
<div class=”tweetrollover”><a href=”http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php echo urlencode(the_title(”,”, false)) ?>” target=”_blank”></a></div>

There, the code might look a bit complicated at first but it’s really just the same code (almost, with the exception it’s linked to the different sites) over and over again. So when you have all your buttons created, cut and saved individually and uploaded to your server, just slam this code into the position you want your buttons to appear. Should really be all there is to it.

The Buttons – Preview

If you have followed this tutorial all through and correctly you should now be presented with a panel of buttons that is working and looking somthing like this:

Round Up

Alright, so we have successfully finished the tutorial and you and all your visitors should be able to enjoy that panel of buttons connected to the most popular social bookmarking sites on the Internet. Of course you can fit in however many buttons you feel is necessary but just make sure that you are checking the width of the position you want to place them in so you don’t have to go back and redo everything.

The design is really just up to you as well. I went with this fairly simple design as it is eye catching as well as easy to understand. The more eye catching you make those buttons the bigger is the chance that the user will click to share with all his/her friends and followers on these social bookamrking sites.

The success of your article being “subbed” is really up to the content of it. As with this tutorial for example. There is no telling if it will be successful or just go down as a regular tutorial after it has been published. But that’s social bookmarking in a nut shell. We just have to do our best and hope that it will go viral some way or another.

If you have enjoyed this tutorial please don’t hesitate to comment and share it through your favoured social bookmarking site. Also don’t forget to follow us on Twitter as well as subscribing to our RSS Feed. There is going to be plenty of cool things coming up here on Raster Rebels so make sure you don’t miss out.

Well, that’s it for this time and see you again in my next tutorial.

Enjoy!