How to Design and Implement Marius Roosendaal-Like Button Bars

Marius Roosendaal is a well-respected designer within the web design community, with his portfolio featured on numerous CSS and design galleries on the web. When I was doing my latest redesign of my website, I was greatly inspired by the sexy but simple “button bars” that were on his site. I’ve decided to go ahead and share my technique for creating a similar looking button, as well as providng the CSS and HTML required for the button to work, and have both an overlay and down state.

Note: I’ve attempted to contact Mr. Roosendaal about my inspiration from the buttons, but he has not responded in about 4 or 5 months. I am assuming with full credit to him that this is OK to post.

Step 1

Create a new document in Photoshop with the following settings:

• Width: 400px
• Height: 400px
• Pixels per inch: 72

Step 2

Select the Rounded Rectangle Tool and draw the image as shown:

Make sure to rasterize the layer afterwards

Step 3

Make a new layer named bg, place it under the other layer, and fill it with the color #222222

Step 4

Right-click on the button layer and go to Blending Options, and duplicate the following layer styles:

Step 5

Create another new layer named highlight

Step 6

Using the Selection Tool, click the button layer, select the entire button, then click the new highlight layer to make sure your highlight in the next step will be on its own layer

Step 7

Using the Brush Tool with the shown settings, make a highlight near the top edge of the button. Make sure white is selected as your main color.

Feel free to erase some of the edges of the highlight as to not lighten up the entire button. Also, adjust the opacity on the highlight later to about 60% or so

Step 8

Take a screenshot of your button by pressing print screen on your keyboard, and paste it into Photoshop by pressing CTRL + V.

Now, using the Rectangular Marquee Tool, select as close to the edges as you can around your button in the screenshot.

Now, press CTRL + C then CTRL + N and then CTRL + V. This should take your selection and create a new document with the exact dimensions as the selection, then paste what you took.

Now just grab the new dimensions by going to Image > Image Size

Step 9

Now, we need enough room for the normal, hover and down state, so take the height of the dimensions and multiply it by three. 51px X 3 = 153px.

Create a new document with the same width but the new height we just calculated

Move the screenshot of the button you made earlier onto this new document, and duplicate it 2 more times. They should all fit exactly right. This is so when we move over the highlight and down state images, we know exactly where to put them

Step 10

Now we are going to create the hover, then down states

Go back to your original document, and go to Blending Options > Color Overlay, and raise the color by a few

Click OK, then repeat step 8 by taking a screen shot of the over state, and placing it over the second spot in the new document we created

Step 11

Go back to the original document for one last time, to create the down state.

Go to Blending Options and duplicate the following settings

Click OK and once again, repeat step 8 by taking a screenshot of this image and putting it in the 3rd slot on our new document we created. Your button should now look something like this:

Step 12

Go to File > Save for Web and save the image using the following settings and name:

Step 13

Now, create a new document and name it button.html, then edit that same document

Step 14

Copy the following code into your document, click Save, and there you have it!

				
				Test Link 1
				Test Link 2
				Test Link 3
	
			

Note: It is not advised to include CSS inside of your HTML, but for the sake of this tutorial it is there for ease. Normally, your CSS should all be inside of a seperate style sheet.

Final Result