Next rasterize this layer.

This is so we can edit the shape.

Control Click the Layer.

You will see dancing rice around your shape :)

With the shape still selected, Choose a Gradient, it's under the Paint Bucket Tool.

Go upto the options for the gradient and choose Linear gradient. See if you have one like the big red arrow is point to.

If not make one.

With your shape selected (dancing rice) , hold shift and drag from the top to the bottom of the dancing rice as the red arrow shows. Try to get as close as possible to mine.

Now duplicate the layer.

While the shape is selected (dancing...yeah rice)

Click on the Rectangular Marquee Tool.

Press and HOLD the ALT button on the keyboard.

Using the Rectangular Marquee Tool, drag about 1/4 into your shape and let go of the mouse, then the ALT button ( you can do it.. I know you can )

You should see dancing rice on only part of it, like the example.

If you do not, redo it correctly

FYI - Control +Z is undo

While the new shape is selected (dancing...yeah rice)

Click and make a new layer.

Fill this New layer with a dark color, or any color for that matter. I chose Blue

Now using the line tool, make an inset line. ( layer1 black line, layer2 white line, nudge white 1 pixel over and make the white layer Soft Light ) or view the inset line tutorial.

select the blue shape layer by clicking on it.

Then click on the Single row marquee tool.

Click in 2 spots, try to space them apart as well as you can. If I was doing this professionally I'd use guides.

Then hit delete to remove those 2 lines in the blue.

Add text to each section, which will be the button OFF states.

It should look like mine.

Does it?

Next, you can either add guides and slice and dice or just add a image mape to the graphic.