These little buttons take a few seconds to make in Illustrator and give a nice polished, “web 2.0” feel to a website or interactive environment.
Firstly, when creating this shiny effect in Illustrator remember to make the document RGB. Go File > Document Color Mode > RGB. It won’t work otherwise. Many thanks to Simon Mcferran who pointed this out in the comments below!
Let’s explain how to make the triangle one. How do you make a triangle in Illustrator? Easy! Click on the Polygon Tool and click once on the artboard and enter 3 in the Sides: field of the resulting dialog box. (Didn’t know a triangle was a polygon? Neither did I until the other day!)
Make another small triangle and place it on top and fill it with a lighter colour. Go Object > Blend > Blend Options and enter 100 in the Specified Steps field. (Half that would probably do). Then, with both large and small triangles selected, go Object > Blend > Make (Cmd/Ctrl-Opt-B) and a beautiful rounded blur will fill your triangle. This method gives you more control that a simple radial gradient fill. See below my tutorial without words; I hope it makes some sense.
To make the shiny highlight at the top of the triangle you have to create a shape by intersecting a circle and a triangle together (see 2nd row above). With both triangle and circle selected option-click on the third Shape Mode icon in the Pathfinder palette where the tool tip says “Intersect shape areas (Option-click to expand)”. You will now be left with just the top of the triangle with a curved base.
Fill this with a linear gradient black-to-white, size and position it inset a bit from the top of the main triangle and set it to Screen in the Transparency palette.