Zymic

First create a new document, 130x103 in pixels.
Then set the Canvas to #306178 (Click on the gray surrounding then click on the Canvas color box to type it in)

Create a box 1 pixel from the corner, and with the demensions 17x16, Give it a linear gradient from #FFFFFF to #CCCCCC, now make the gradient go vertically, not horizontally, and go from the White (#FFFFFF) to the gray (#cccccc).

Look at the step image for more guidance.

Now make a circle in the center of the box you created in step 2 with the demensions of 9x9. Give it a linear gradient from #CCCCCC to #FFFFFF With the #CCCCCC in the top left corner, and the #FFFFFF in the bottom right corner.

Look to thestep image for more guidance.

Now repeat step 2 & 3 for the right side, look to the step image to see what it should look like as of now.

Make a rectangle in between your two squares that is 94x16. It shouldnt overlap the two squares, it should be right in between them. Give it a linear gradient from #71AAC6 to #006699 which is close to the first color, then one on the end that is #71AAC6. This may be confusing, look at the image to get a better explaination, its hard to explain. The gradient should be verticle.

You now have a completed button, select all of that button and hit Ctrl+C on your keyboard And then hit Ctrl+V and move it down until they are 1 pixel apart. Repeat that until you fill up your space or until you have enough navigation buttons. The final result should like like the picture below with text added: