The ultimate guide for creating shiny web buttons with Inkscape

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.

• Using the Rectangle Tool draw a rectangle and fill it with the desired color. Round the corners (here I used a 16px radius):
  
• Duplicate the rectangle, fill the copy with a gradient from partly transparent black to fully transparent black. Put the copy over the original rectangle (I used two rectangles to ease the creation of derivatives with other colors later)
  
• Duplicate the rectangle once again, move it a bit to the right and down, make it black, apply a slight Gaussian Blur filter and move it at the bottom of the stack, under the rest of the elements. This is the base button:
  
• With the Text Tool put a text label on the button. Choose the font, size and color as you want. Copy the text, make the copy black, apply a slight blur filter, move it a bit to the right and down, move it under the initial text for a 3D look:
  
• Do as many derivative as you want: just change the color of the initial rectangle and instantly you have versions of any color:
  

Aqua Buttons

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

• Start with the base rectangle from the simple button and increase the radius of the corners, for a "rounder" look. Duplicate and fill the copy with a gradient from partly transparent black to fully transparent black, but oriented upside-down than the gradient in the previous example. For the light area, duplicate the rectangle again, fill it with white, resize it to reduce the height and move it to the top area of the button:
  
• Change the white highlight area to a gradient from partly transparent white to fully transparent white. Do another light area, another white duplicate of the base rectangle, this time colored in solid white. Resize it for a very thin height, place it at the lower part of the button and apply a strong Gaussian Blur filter:
  
• Apply a shadow and maybe a little blur to the top highlight area:
  
• This time I will make a more complex label: not only text but also an image. With the Text Tool add some text and import and resize a PNG as the image. Use Trace Bitmap for Brightness to get a vector version of the image contour, duplicate the text and made them both shadows for a 3D look by coloring in black, moving a little to the left and down and applying a slight blur filter:

Crystal buttons

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

• Start with the simple button and change the vertical orientation of the gradient:
  
• Duplicate the base rectangle and fill it with white. Using Bézier Lines draw a polygon ovet the top-left part of the button and intersect it with the white rectangle to het a highlight area:
  
• Adjust the curve of the lower edge of the light area and apply a gradient from partly transparent white to fully transparent white:

Shadow at the bottom

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

• Use the Aqua button with no shadow. Duplicate the rounded rectangle, fill it with black, change the height and move at the lower part of the button. Apply a Gaussian Blur filter, change the transparency if needed and move it under the button:
  

Reflexion

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

Start again with the Aqua button with no shadow. Duplicate the colored rounded rectangle and move it lower, under the button, it will be the reflexion:

• Color the reflexion with a gradient from the base color with full opacity to the same color with full transparency. If you want, add any type of shadow from those described above:
  You can rad a lot more about reflected images in a dedicated tutorial.

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.

• Start with the final version of the Aqua button. change its background color in a lighter shade. Select the label shadow and transform it in a glow by changing the color from black to white and increasing the blur:
  
• Here are 3 states of the button: normal, highlighted and inactive. The inactive version vas obtained by using gray fro the button background and a lighter gray for the text label:
  

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 gmail.com 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 OpenArt.ro, www.xdrive.ro and Inovatika for motivating me to write this.