How to Create a Slick and Clean Button in Photoshop

May 7 2009 by Jacob Gube | 131 Comments

How to Create a Slick and Clean Button in Photoshop

This Photoshop tutorial shows you how to create a simple and clean "Web 2.0 style" button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).

The button on this tutorial was inspired, and is modeled after, the Campaign Monitor web interface. By following along, you’ll learn how to create a very similar button.

Final Result

Click on the following image to see a working demo (mouse over the button to see the rollover state).

Final Result.

Download source files

If you’d like to download the source files used in this tutorial, go ahead. The following download link contains the Photoshop PSD file, the finished CSS image sprite in PNG format, and an HTML demo with the HTML and CSS source code.

Let’s get started with the tutorial, shall we?

Setting up the document

1 The button’s dimension will be 250px wide and 50px high. To accommodate both the idle state and rollover state, double the height (100px).

Setting up the document

2 Drag a guide to the 50px mark to clearly delineate the top half and bottom half of the document. Make sure that Rulers are turned on (Ctrl + R) by checking to see that View > Rulers is checked. Drag a horizontal guide from the Ruler down to half of the document (50px marker).

Setting up the document

Creating the shape

3 Activate the Rounded Rectangle Tool and set the radius of the rounded corners to 3px.

Setting up the document

4 Drag the shape over the top half of the document. The color of the shape doesn’t matter, as you’ll soon see. The dimensions of this shape should be 250px wide and 50px high.

Setting up the document

5 Create a selection around the rounded rectangle shape by Ctrl+ clicking on the shape layer.

Setting up the document

6 With the selection still active, create a new layer (Ctrl + Alt + Shift + N). Name it Idle. With the new layer active, fill the selection by going to Edit > Fill (Shift + F5).

Setting up the document

7 Delete the Shape layer of the rounded rectangle, it’s no longer needed.

Adding some layer styles

8 Double-click (or right-click > Blending Options…) on the Idle layer to open up the Layer Styles dialog box.

Setting up the document

9 Add a Gradient Overlay. Double-click on the Gradient to open up the Gradient Editor dialog box. For the left Color Stop, use a dark green color #618926 and for the right Color Stop, use a lighter green color: #98ba40. Move the Color Midpoint to 35%.

Setting up the document

Setting up the document

Setting up the document

10 Add an Inner Shadow. Change the Blending Mode to Normal. Change the color to a light green color, #c6d894. Set the Opacity to 100%. Give Distance and Size a value of 2px. See figure below for the settings used.

Setting up the document

11 Add a Stroke. Set the Size to 1px and Position to Inside. Set the color to the dark green as in step 9 (#618926). See figure below for the settings used.

Adding some layer styles

Here’s what you should have so far.

Adding some layer styles

Adding a Radial Gradient

12 Create another layer on top of the Idle layer, name it Radial_Gradient. Switch the foreground color to # b8cf69. Make a selection around the rounded rectangle shape by Ctrl + clicking on the Idle layer. Then switch back to the Radial_Gradient layer.

Adding some layer styles

13 Switch to the Gradient Tool (G). Set the gradient style to Radial Gradient. Click on the gradient to open up the Gradient Editor dialog box.

Adding some layer styles

14 In the Gradient Editor dialog box, select the Foreground to Transparent Preset. Make sure the left color stop is set to light green color, #b8cf69.

Adding some layer styles

15 Make sure you still have a selection around the rounded rectangle shape and that the active layer is Radial_Gradient. Make sure that Rulers are turned on. With the Gradient Tool (G) active, drag from the top of the selection to about 30px below the selection.

Adding some layer styles

16 Adjust the Opacity of the Radial_Gradient layer to 80% or to a level that you like.

Adding some layer styles

Creating the rollover state shape

17 Duplicate the Idle and Radial_Gradient by first Shift + clicking on each one and then right-clicking to open up the context menu. Select Duplicate > Duplicate Layers…

18 Move both duplicated layers down to the bottom half of the document by clicking on them in the Layers palette and then using the Move Tool (V). Rename the duplicate layers – use Rollover for Idle copy and Radial_Gradient_Rollover for Radient_Gradient layer.

Creating the rollover state shape

Tweaking the rollover state layer styles

19 Except for the colors, we’ll keep everything the same. Double-click on the Rollover layer to open the Layer Styles dialog box. For Inner Shadow, change the color to a light blue, #839dbf. For Gradient Overlay, change the left color stop to a dark blue, #0f2557 and the right color stop to a lighter blue, #245293. Finally, change the Stroke color to a dark blue, #0f2557.

Tweaking the rollover state layer styles

20 We’ll add a Color Overlay layer style for Radial_Gradient_Rollover. Double-click on that layer to open the Layer Styles dialog box. Add a Color Overlay style and set the color to a blue color, #5c737c.

Tweaking the rollover state layer styles

Adding the text

21 For this, we’ll use a simple font family: Arial. Feel free to use whatever you like, but for the following techniques, something that’s bold/thick is suggested.

22 Use the Horizontal Type Tool (T), set the font family to Arial, font style to Bold, font size to 16px, anti-aliasing to Smooth, and the color to white (#ffffff). Type in the text you’d like the button to have.

Adding the text

Giving the text a drop shadow

23 Double-click on the text layer you just created to open up the Layer Styles dialog box. Set the Blending Mode to Normal, the color to a dark green color (#618926), Opacity to 100%, uncheck Use Global Light, Angle to -60%, and finally Size and Dimension to 1px.

Adding the text

Centering the text

24 Ctrl + click on the Idle layer to make a selection. Make sure that the text layer is the active layer.

25 Center the layer vertically by going to Layer > Align Layers to Selection > Vertical Centers.

26 Center the layer horizontally by going to Layer > Align Layers to Selection > Horizontal Centers.

Centering the text

Duplicating the text layer for the Rollover state

27 With the text layer still active, right-click on it and select Duplicate Layer… (or Alt + down arrow key if you have the Move Tool active). Move it down to the bottom half.

28 Ctrl + click on the Rollover layer to create a selection around the lower shape. Use Layer Align to Selection > Vertical Centers. If you somehow moved the duplicated text layer to the left or right, you should also do Layer > Align Layers to Selection > Horizontal Centers to recenter it.

Centering the text

Change the layer style

29 Double-click on the text layer you just created to open up the Layer Styles dialog box. Set the color to a dark blue color (#0f2557), leave the rest the same.

You’re done (with the Photoshop part)!

If you followed along, this is what your button sprite should look like.

Centering the text

Now let’s do the HTML and CSS to get your button working.

30 Save your creation for the web, name it campaign-monitor-button.png.

31 Create an HTML document. Save it in the same location as the campaign-monitor-button.png file.

The HTML

The markup is basic, a link inside a paragraph tag. I chose to use a paragraph tag as a wrapper/container because I don’t think <a> elements should stand alone. It would work without the <p> tag.

<p class="button"><a href="#null">Click this button</a></p>

The CSS

The CSS is a simple CSS background sprite image replacement technique.

I chose the text-indent method because it has been tested to work with screen readers; the downside is that it doesn’t degrade well in the CSS on / Images off scenario (which is a rare situation and usually done out of choice by the user). Giving the <a> element a CSS property of outline: none removes the gray outline in Mozilla-based browsers.

.button {
	display:block;
	width:250px;
	height:50px;
	text-indent:-9999px;
}
.button a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url(campaign-monitor-button.png) no-repeat top left;
	outline:none;
}
.button a:hover {
	background-position:0 -50px;
}

Demonstration

Credit

The button on this tutorial was inspired the Campaign Monitor web interface which has these call-to-action buttons in their interface. Check them out when you have a chance, they provide a great service for designers and developers!

Questions and thoughts?

If you have any questions or if you’ve found errors, leave us a note in the comments! Also, feel free to showcase your work here by sharing a link to your finished product if you followed this tutorial.

Related content

131 Comments

Gabe

May 7th, 2009

Thanks for the tutorial – I always struggle with getting my text to look good, your drop shadow on it looks sweet: crisp and clean.

Matthew Heidenreich

May 7th, 2009

simple and effective tutorial! Thanks for sharing.

Ben

May 7th, 2009

This was a good tutorial. Campaign Monitor uses Gotham as the main typeface on buttons, navigation etc. Gotham isn’t cheap, but it’s a nice touch of professionalism for buttons.

http://www.typography.com/fonts/font_overview.php?productLineID=100008

David

May 7th, 2009

Fantastic touch making use of sprites, thanks!

Mike

May 7th, 2009

Great tutorial — looking forward to seeing more on Six Revisions.

Jacob Gube

May 7th, 2009

@Gabe: Thanks, I like experimenting with Blending Modes in the Layer Styles to create clean, simple text effects. The one on the leading image was by accident (inner glow set at weird settings), but it turned out great.

@Ben: Cool beans, thanks for identifying the actual font. I used Arial simply because I know everyone’s going to have it so that if they really did want to follow the process step-by-step, they wouldn’t be stuck. I’d use my favorite font, Rockwell, if it wasn’t a tutorial. The dropshadow used in this tutorial would be killer with that font.

mishoo

May 7th, 2009

I would keep the shape layers and just change the fill to 0% in case you ever wanted to make them longer or shorter you still have the shapes which allow you to use the handles to resize without compromising the corner radius. Also, keeping the shape makes recoloring the lower shape easy as pie.

Nice tut nonetheless.

Sebastian

May 7th, 2009

Step 11′s image should be 04-15_slick_clean_14.png

alex

May 7th, 2009

Nice tutorial thanks

Warren

May 7th, 2009

Great tutorial, especially the outline:none for mozilla.

William

May 7th, 2009

Very thorough tutorial, and simple, a great combination. Really cleared up some confusion for me over setting up CSS sprites, I hope to implement this into my personal design practices soon.

Seven

May 7th, 2009

Nice tutorial! I’ll try it in Gimp, I guess this should work, too.

Patricia

May 7th, 2009

It never occured to me to use photo shop for buttons. I have some button maker I am using- it does not give me nearly as many options as you have shown.

Tatu

May 7th, 2009

It would have been a whole lot simpler to just use a Hue/Saturation adjustment layer with a mask to change the color of the bottom button. No need to change the layer styles and you can easily change the hue afterwards.

Paul Saunders

May 7th, 2009

Cool – learned something new here with Align Layers, and red arrows in tut allow me to home in immediately on action req’d. Rollovers still have power. Thanx.

monie

May 7th, 2009

Nice tutorial..

Steve Robillard

May 7th, 2009

Great tutorial and very timely as I have gone through I don’t know how many button styles for a project lately. You may want to swap your p tag for the more semantic button tag instead.

Pali Madra

May 8th, 2009

Great tutorial thanks.

Noob question. Why in the tutorial did we not use the shape tool itself to build the buttons but instead choose to create another layer with a similar mask.

The buttons came out really nice and if I could follow the tutorial anyone can!

Thanks again

Claire Web

May 8th, 2009

I don’t think i have ever seen a tutorial on creating cool buttons. I think it is something most designers need to improve a lot. Hopefully they will take this information on board and improve the badly looking buttons – they should be banned!

Chantelle Tibbs

May 8th, 2009

Look at those shiny beautiful buttons:)
Very well done. I want three of those for my site!

I used DaButtonFactory.com and they are good. Super quick, just not as smooth as these buttons…

Paolo

May 8th, 2009

Great tutorial! Thanks.

Will Morgan

May 8th, 2009

Removing outline: none; is a bad idea as people using keyboard navigation won’t know where their focus is. Just be aware that the outline only displays when the element has focus, which is how a user knows where they are in the DOM.

Also, if you centre the text, then why not centre the radial gradient? It looks a little bit off.

Another note on the Campaign Monitor website, /designer/ gives you a JS prompt, and if you say no, you’re locked into going elsewhere. A nice touch, but you shouldn’t restrict someone from browsing the website based on their profession, IMHO. I’m a UI developer by trade, not quite a designer, but I still wanted to browse the site nonetheless.

ThillaiArasu

May 8th, 2009

Can you post articles for gimp

Jacob Gube

May 8th, 2009

@mishoo: Yeah, that would be a good option. I just always preferred working with layers – but you’re right, keeping the Shape object makes it more flexible to changes.

@William: Well, that’s great – I wasn’t intending to teach CSS sprite positioning here, but I guess seeing it in actual use helps explain the concept.

@Tatu: Great tip, my methods seem to be “destructive” methods where I don’t normally account for changes to the design later on. The Hue/Saturation Adjustment layer is a good call.

@Steve Robillard: I struggled as to what tag I wanted to use for this tutorial. I figured a link is semantic, you click on it and it takes you some place. The text “Click this button” will throw people off (those that use screen readers, for example) – but a meaningful title attribute and replacement of the text link will make it semantic and accessible. I have to admit that I rushed the HTML/CSS part on this one, again, because I wanted it to be a Photoshop tutorial and not an (X)HTML tutorial.

@Pali Madra: Good question, it’s just been my method, you could have used the shape layer instead.

@Will Morgan: There’s got to be a compromise right? Having the outline there sucks using the text-indent method for CSS image replacement because the gray outline would extend to the left of the browser.

Jacob Gube

May 10th, 2009

@Sebastian: Fixed it, thanks for letting me know!

Lee Munroe

May 10th, 2009

Great tutorial – nice standard for effective buttons

Devlin

May 11th, 2009

Cool tutorial. Pretty slick.

Jahangir agha

May 11th, 2009

Nice tutorial. I don’t know about the CSS part because I am only a Graphic Artist. But the Photoshop part is nice :)

Sean McKenna

May 12th, 2009

Any web designer should easily be able to make this. Anyone that knows photoshop should be able to make it.

Trip

May 13th, 2009

Instead of ‘outline: none’, you can give it ‘overflow: hidden’ which will restrict the outline to the dimensions of your button.

Recruitment SEO

May 21st, 2009

Good tutorial – like your others. I particularly like the simplicity of the CSS ‘moving’ of the image to get round the image preload problem (nothing more annoying than waiting for a hover image!)

Thank you.

Joe

May 30th, 2009

Great tutorial – Thank you so much for the info. I’m new to Six Revisions and just love your site!

Piya

May 30th, 2009

Wonderful tutorial…I tried it..It looks amazing..However, when I uploaded it on website, it displays Green as well as Blue button. Can you suggest why?

Erik Arckens

May 31st, 2009

Hi,
just the most fantastic tutorial I have seen on rollover buttons! Too good for words.
Just a question: can you show generic css and html code in case of hundreds on buttons on lots of pages on a site?
I have trouble getting the right code to work for some fifteen pages with tens of different buttons.

Erik Arckens

May 31st, 2009

Another question:
why do you use a .button and another .button a css-element?
What do you think of this styling:

#button {
display:block;
width:100%;
heigth:100%;
background: transparent;
url(campaign-monitor-button.png) no-repeat top left;
outline:none;}

#button span{
display:none;}

…and of course also the hover style.
The actual text link can be inside a span element, and the the link text can be hidden with css and the image displayed instead (so that search engines still see the text).

Jacob Gube

May 31st, 2009

@Erik Arckens: For your first question, do you have an example link? It should work fine multiple times, except if you have another .button style rule. Second question: that code should work, but it’s basically the same as mine, except instead of a p > a, you use a > span. The reason I did it my way is because I don’t like having an a element outside of a p element. If you want more than one button in a page, you should really use a class instead of an ID (.button versus #code). By the way, the height property is spelled wrong, so you might have issues with that.

Erik Arckens

May 31st, 2009

Would it be possible to create a button that includes instead of a href link a php function?

I need a “contact us” button, which activates this php function:

Erik Arckens

June 1st, 2009

Would it be possible to create a button that includes instead of a href link a php function?

I need a “contact us” button, which activates this php function:(I did not include the because it does not display in the blog) ?=createMailto(‘info@mysafety.be’)?

Randy

June 11th, 2009

What a great tutorial. Many thanks for taking the time to do all that. My goodness, very thorough!

Arken69

June 18th, 2009

HEY!!! this one is good. thanks a lot for this posting.

Liviu A.

July 2nd, 2009

Hey, great tutorial, thanks for sharing!!!
Really awesome!!

joyoge

July 9th, 2009

nice helpful button tutorial, thanks a lot..

varun

July 12th, 2009

thank yo so much, it is a great tutorial

Junix

July 14th, 2009

Wow, your so proficient in photoshop. i love that.
well, am a newbie of webdesigning, am actually a programmer kaya lang, i nid to design. hehe, akin lahat..
Praise God sa lahat.

soumya

July 15th, 2009

oh!my god this is my favorite website its improves my professional aspects i like this tutorials very much thank you so much for easy going tutorials

Chris

July 15th, 2009

This tutorial is great – does anyone know how to make the button “drepress” when cicked? Is that something you can do with the html or css or do you have to design the “click” pannel? If the former, what would the code be?

Rach

July 27th, 2009

Thanks for sharing this tutorial. Finally I could make my own rollover effect button, as I am only a beginner in photoshop. Thanks once again

Richard

August 21st, 2009

Great Tutorial. Love the site. Now here is a question. What is the easiest way of coding this kind of button if there were say five buttons instead of one?

Jiva

September 7th, 2009

I also would appreciate an example of the code that would be necessary to display multiple buttons. ex. vertical menu bar with multiple links/button running down it.

Christian

September 23rd, 2009

Thank you very much! Just what i looked for.
(Sorry my bad english)

shimon

September 25th, 2009

Thanks for this great tutorial I stumbled it. Just one question how can I make the button smaller?

Pixel Encode

October 24th, 2009

nice, this is a very good tutorial for webdesign

Mr. Dee

October 28th, 2009

Thanks for the tutorial, I am going to teach this to my High School students now that I am comfortable doing it.

johnny rodrigeuz

November 3rd, 2009

very cool. great tutorial!

Danna

November 14th, 2009

Excellent tutorial. Really learned a lot from this.

It seems like such a simple thing to do, but I can’t get the button to open a different webpage in a separate window. Can you help?

Thanks!!

Marcell Purham

November 30th, 2009

Great tutorial. Very nice and easy techniques

Brian

December 18th, 2009

Hi Jacob……Wonderful and simple tutorial!

TUTORIAL CORRECTION – Minor
—————————
One area of detail I’d like to point out since I ran into this issue. You need to deselect the “Use Global Light” when creating the shadows for the text and button. If you don’t the button inner shadow will shift. It can be subtle and not immediately noticed.

You actually see it in the tutorial. As soon as you added the text, your button inner shadow shifted to -60. You can easily see the shadow(highlight shine) at the bottom right of the button(instead of upper left) in your final demo and the tutorial.

Just wanted to bring that to your attention.

Great tutorial!

Stephen Provis

December 18th, 2009

Hi Jacob, Nice tutorial, clean and effective result. Thanks!

Neil

December 23rd, 2009

In step 9 the tutorial references “left Color Stop” and “right Color Stop” what is this? how do I find it? there is no explanation.

Cambridgeshire

January 7th, 2010

Wow, this is another great tutorial. Web Designers often overlook how important making your buttons look nice is! Thanks for sharing.

will

January 17th, 2010

really good tut mate , but you should sort your page css out as often people quit pages that dont look the part , good work

will

Lenny

January 23rd, 2010

Cheers for this, very easy to follow.

Rich

February 23rd, 2010

Great stuff, one of those simple but much needed tutorials which can help everyone from noobs to experts.

KM

February 27th, 2010

I love photoshop for its simplicity yet power. I usually stay away from the more complex javascript or flash based menus and navigation system as I think they negatively impact SEO. Menus like this however are excellent for websites as they are simple yet creative and above all do not require complex javascript libraries.

Borge

March 9th, 2010

Thanks for this nice tutorial dude, love it awesome. And now I know.

Justin

March 20th, 2010

I’m having trouble creating a selection around the rounded rectangle shape that’s outlined in step 5. The text says to use Ctrl, +, Click while the pictures next to it instruct you to do Shift, +, Click but neither of these select the shape. What is the right key sequence?

VMTyel

March 27th, 2010

wonderfull, it’s enough to I become pro designer during watch this tutorial :D
many mistake :”>

FW Website Design

April 5th, 2010

Great Tutorial, you cant build a website without knowing this, Thanks for sharing.

webseite erstellen

April 7th, 2010

I studied the html tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

Andy

April 26th, 2010

Very detailed, helped raise my skill. Thanks!!

N00b

April 28th, 2010

I followed along, very good article. I am confused on one part, was there ever a point to marge the layers in PS? When I save for web, I end up w/ the button still split apart.

Yarny

May 10th, 2010

Great demo – keep up the cool work, thanks

SexyDesigner

May 13th, 2010

Hey, did you try a Cool Button Designer? I think it is a best web button creator – if you dont have a photoshop or dont know how to use it. I suggest you to try it, it has bunch of features, and creates a cool looking buttons. Just google for Cool Button Designer.

Chao.

designer

May 17th, 2010

hi…j@cob….it make my site luk more beautiful..thnx

designer

May 17th, 2010

very impress n easy too…thank u so much

Manuel

May 22nd, 2010

Thanks for sharing. Nice work!!!

Lijiushun

May 30th, 2010

thanks too much ….too nice!!

Arlind

June 1st, 2010

Hi, Great tutorial. I’m just having trouble implementing it for more than one button. Because the way this button functions with the background image being specified on the css does this mean I have to repeat the css for each button that I have. The only way I could get more than 1 button to work was like this:


Is there a better way where there is not as much repeat of css.

Thanks in advance:)

prem

June 21st, 2010

Its so nice tutorial Its help to create menu……….
Thanks

Robin

June 23rd, 2010

I have the same question as Arlind (June 1st, 2010). How can I put more than one button on an existing page? I need four and would most likely align them in table cells. How would the code read?

Otherwise… a great tutorial!
Thanks!

nikhil

July 9th, 2010

thanks for sharing such a nice n informative post.

Dennis "DennisKnows" Marshall

July 14th, 2010

Yea I definitely need this because the buttons in aWeber just aren’t cutting it..

Muhammad Ahsan

August 7th, 2010

I really love this tutorial, great work…….and nice details

Nicole

August 11th, 2010

Thank you! I always wondered how to do this. Its a lot easier than creating 2 different states or files. Well done!

sayoks

August 18th, 2010

Thanks, very nice tutorial.

Thanks again!

DF Web Design

August 21st, 2010

I do love the campaign monitor design. It’s so clean and uncluttered, yet still colourful enough not to be boring.

Ben

August 27th, 2010

How can i make the button change size depending on the size of the browser?

Isaac

September 7th, 2010

to make a rounded selection ctrl+ click on the shape thumbnail in the layer window not in any other place

I wonder why they dont make a full and direct tutorial instead of make me dizzy and all newbies !!

George Gina & Lucy

September 22nd, 2010

Oh jes!!! great work…….and nice details.. They are necessary!!! Thank you!!

Dsquared

September 22nd, 2010

I really love this tutorial, great work…….and nice details

Oded

September 29th, 2010

GREAT tutorial. Gonna split test these buttons on some of my campaigns, I wonder how they’ll help conversion in comparison to other buttons I’m using.

Cheers

Illiya Vjestica

October 5th, 2010

Probably the best tutorial of all time. I once said to one of my designers can you design me a call to action that looks like the campaign monitor button, you gives have nailed it. I really like the look and feel of this button and I will be using it on some of my websites. Thank you. This tutorial will also come in handy for explaining to designers exactly what I mean by campaign monitor button!

Igrice

October 6th, 2010

Nice tutorial.

BillyBibps

October 10th, 2010

Nice tutorial friend, jus worked it along and got the ditto :)

Igre

October 12th, 2010

great tips dude.,now i can enhance my skills in photoshop.

skqi

October 15th, 2010

thank you very much. Even dummy like me also able to create web 2.0 button with tutorial above. Thanks again.

Jontendre

October 25th, 2010

Very helpful, mate. Gave me insights into Photoshop that I’ve not had before.

Great job.

hace

December 14th, 2010

非常给力!学习中~~

Jacob Gube

December 14th, 2010

For those wondering, @hace’s comment above mine is translated by Google Translate as:

Is a force! Learning ~ ~

stuart

December 22nd, 2010

Hi Jacob, very simple to understand clean and effective – thanks

Laren Galloway

December 22nd, 2010

it works and it is not difficult at all! great!

Marty McColgan

January 10th, 2011

Great tutorial looking forward to reading more…

Billig Ferge

January 18th, 2011

Nice tutorial (and website) for making a good looking button. Thanks :-)

Jaime

February 3rd, 2011

Fantastic

Joshua

March 13th, 2011

This tutorial and everything it encompasses is a gift!

Thank you – and thanks for providing the psd and html files.

cs4 ultra newb

April 16th, 2011

ok-when I get to step 18, after I dulicate the layers and try to move them from the Layer pallet over to the bottom half of the document, I get an error message that says,”could not complete your request because source and destination documents are the same” CAN SOMEONE PLEEEEASE HELP ME WITH THIS! what am I doing wrong?

Gaz

April 17th, 2011

Nice tutorial, Definitely need decent buttons.

Thanks for sharing.

FlannelBeard

April 25th, 2011

“6 With the selection still active, create a new layer (Ctrl + Alt + Shift + N). Name it Idle. With the new layer active, fill the selection by going to Edit > Fill (Shift + F5).”

^^^ Right click layer, ‘rasterize’. Same thing. :)

mio

May 5th, 2011

nice tutorial!:)
thanks.

PegLeg

May 10th, 2011

I have the same question as Arlind (June 1st 2010)

I need to have 10 buttons on the same page. Do I need to define 10 CSS rules or is there an easier way?

saionixz

May 23rd, 2011

Good job

Ala

July 5th, 2011

Great tutorial – one of the best I’ve seen. Easy simple to follow. I created it in less than 20mins. Bookmarking this!

Divine Media

July 6th, 2011

very good tutorial, decent buttons.

Thanks for sharing this

Strangeman

August 1st, 2011

Thanks for this very useful tutorial.

@pegleg – I wanted to created several buttons on the same page, and the way I tackled it was to create a separate class for each different button background image ..
.button1 a {background:transparent url( xxxxx)etc;}
.button2 a {background:transparent url( xxxxx)etc;}

then change the html using two classes to
<a class="button1" href="#null">Click this button</a>
<a class="button2" href="#null">Click this button</a>

etc

ubaid

August 16th, 2011

great work i love it.

Rashardh

August 29th, 2011

The Perfect Steps that I have never viewed before.
Superb methods to understand very quickly

dilswee

September 28th, 2011

I’ve tried to implement Strangeman’s approach using the following code:

<a href="#null" rel="nofollow">Home</a>
<a href="#null" rel="nofollow">Hours</a>

However, no images load. I only get get phantom outlines if I click where images should be. works, but I don’t want breaks between buttons. Any help?

Mark Web

September 30th, 2011

Great tutorial. I don’t think I have come across such a detailed explanation on how to create nice looking buttons. Bookmarked for future reference, thanks.

Mrinal

November 2nd, 2011

Very good and informative article written on web 2.0 slick and clean button in photoshop, happy to learn it.

condramedia

November 7th, 2011

Great tutorial. Very stylish. You have taste, sir!

Zaránd

November 11th, 2011

Hi.

I am also trying to create more buttons, to replace the menu at the top of my (basic) website. I have made different .png files with the different words (home, reviews, gigs etc)

The first button works

The second does not. I copied the css but changed button to buttonb (buttonbio.png)

 .buttonb{
	display:block;
	width:150px;
	height:50px;
	text-indent:-9999px;
}
.buttonb a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url(buttonbio.png) no-repeat top left;
	outline:none;
}
.buttonb a:hover {
	background-position:0 -50px;

then

<a><a href="http://lamortsubite.co.uk/bio.php&quot; rel="nofollow">Bio</a>

All I get is the word Bio. No button. Can you help perhaps? I am not an expert…

Mark

November 18th, 2011

Thanks, also used this to create some nice smallish banners.

Al

November 20th, 2011

Hi Zarand, I think you forgot to add the class=”buttonb” to the link.
Should be like this:
<a href="http://lamortsubite.co.uk/bio.php&quot; rel="nofollow">Bio</a>

Bhattit

November 26th, 2011

Very wonderful tutorial…. thank you so much for posting this useful tutorial… Well done… :)

Samuaï

November 27th, 2011

Hi!
Thanks you. Very simple and very nice!

Asi serija

December 11th, 2011

working!! try it, it is easy when well explained :) thanks!

Calvin

February 19th, 2012

AGH! I wish I had read this a week ago BEFORE the 3 hours or so I spent trying to make a button like this. Great tut anyway, cheers.

chandra

June 13th, 2012

explained very well

Anthony

June 15th, 2012

My question is where do you write the HTML and CSS code in what program dreamweaver or photoshop ? Cause it didn’t say where to edit the HTML and CSS after the photoshop creating the button

Leave a Comment

Subscribe to the comments on this article.