Creating a Custom Button - Page 1
       by kirupa  |  22 November 2008

It used to be that buttons were the gray, rectangular shapes that you clicked on to do something. When you interacted with them, they may have changed their colors around a bit, but few did anything really noticeable or fancy.

For better or for worse, nowadays, it is very common for your button to take on a variety of shapes and forms. In this tutorial, I will explain two things. First, I will show you how you can turn an image into a button. Second, I will show you how to add custom rollover and pressed transitions when you interact with it. In the end, you will have created something with all of the functionality of a button, but it will not resemble a button in any way, shape, or form.

Take a look at the following application. Move your mouse over and click on the green paper bag to see how this button reacts:

Get Microsoft Silverlight

[ what you will have created by the end of this tutorial ]

The above effect is fairly simple to create, so let's look into how you can do this yourself:

  1. Before you begin, make sure you have read my earlier Getting Started article and have Expression Blend installed.

  2. Launch Expression Blend. A Welcome Screen should appear, and from this screen, click on the New Project link:

[ from the Welcome Screen, click the New Project link ]

If you do not see a Welcome Screen, then go to File | New Project instead. The end result is the same.

  1. After clicking on New Project, the New Project window appears. From this window, select the button for Silverlight, WPF, or Windows Phone Application! for Name enter ImageRollovers, and ensure the Language is set to Visual C#.

Click OK to both close your New Project window as well as create your new project with the specified values.

  1. After you have created your new project, you will see your Artboard. What we want to do next is insert an image into your artboard.
    Currently, Blend does not support copy and pasting an image from the web, so save the following image to a location on your computer first:

The above icon is from the excellent Bagg and Box's set, so feel free to check out the full set (and licensing terms) by clicking here.

  1. Once you have saved your image to your computer, just drag and drop the image from the location on your computer and into your artboard. There is a good chance that when you do that, your image will be unacceptably tiny:

[ when you insert an image into the artboard, the size of the image is tiny ]

  1. The easiest way to fix this is by simply resizing your image using the adorners that surround it on the artboard. Hold down your Alt key and just begin resizing to preserve your image's aspect ratio:

[ hold down the Alt key while resizing to lock the aspect ratio ]

Ok, so far so good. You got a brief introduction to what you will be doing in this tutorial, and you made some progress where you inserted an image and resized it appropriately on our design surface. On the next page, you will learn how to go from an image to a button.

Onwards to the next page!

1 | 2 | 3

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.