The ultimate guide for creating shiny web buttons with Inkscape

AddThis Social Bookmark Button

I will follow some ways to create various kinds of web buttons with Inkscape: simple, aqua, crystal, with and without shadows, of various colors and in various states.

Simple buttons with a 3D look

I'll start with the simplest button, which will be reused later for the other styles.

Aqua Buttons

I'll get to buttons made in the Aqua style, simulating a liquid or gel effect.

Crystal buttons

Attach a crystal or glass effect to the simple button created earlier.

Shadow at the bottom

I'll explore a different kind of shadow, which will completely change the perspective of the button.


Another effect I'll experiment with is reflexion (mirror).

Roll-overs, highlights and inactive buttons

For a website, various stated of a button may be needed: active, inactive or even a roll-over effect when the mouse passes over it. Here the "ultimate" guide for creating shiny web buttons with Inkscape ends. If I forgot some useful cases, drop me a note and I will add new sections.
Create your own buttons by following my instructions or even using the SVG sources of the buttons created in this tutorial.

A Romanian translation is also available.

 This tutorial is free, but if you find it entertaining, pretty please (this is not a requirement, only my humble wish) send an email to dioanad at server with thanks for motivating me to publish it and expressing your unhappiness to the same person for destroying my motivation to publish more.
Be nice, polite and do not do nasty things with the address above. Thank you.
Many thanks to my friends at, and Inovatika for motivating me to write this.