This tutorial will show you how to create a button that looks as if it has a fire lurking inside. The tutorial will use both Expression Design and Expression Blend.
Get the source here.
For this tutorial we will start off in Expression Design to create the graphics for the button, then we will move into Expression Blend to create the button template and animate it. Ready?
LET'S GO!
Open Expression design and create a new document about 150px squared, it doesn't really matter though because we can change its size later. First we need to create a base circle for our button, mine is going to have medium gray stroke of 1px (more if you want) and a radial gradient fill of dark blue to a lighter blue. 
Next we are going to add some FIRE! Grab the pen tool 
and create shapes over the circle, these can be very rough because we are going to blur them soon. I have created one large shape and just reused it at different sizes, color, transparency and angles.
Now we want to add a Gaussian Blur to the object by selecting the object and go to the effects panel on the right hand side.
Press the FX button and select Gaussian Blur and then change the radius to your liking. Next I want to add a simple shine to my button, so to do this, create a copy of the original circle and overlay it on top of the button. Set the fill to white for now. Using your "Add Point" tool 
and add one point to the circle. Now with the Direct Selection tool 
, move the bottom most point and the newly created point to create a nice wave through the middle of the button, remember to grab the splines and adjust them as well to get the right shape. I have added a gradient to mine of white to clear, and then brought the opacity of the whole object down 50% or less.
and there we go! we have our button design finished. Now we need to export it into Expression Blend. So go to File > Export and save the exported file as a Silverlight Canvas (remember where you save it).
NEXT UP! Creating your template and animating your button in Blend!
Open Blend and create a new Silverlight 2 project (crtl + shift + N). Now we need to add an existing item, this can be found in the Project menu or just press Crtl + I. Now go find your buttondesign.xaml you created in Expression Design before. Once its loaded, it should be available in your project tab over on the right hand side panel.
Double click it to 0pen it up and you should see your button design in all its glory! Now grab it all the items in layer 1 and copy it into the clipboard (ctrl + C). Now go back to your page.XAML and create a new button, right click it, go to Edit Control Parts (templates) and Edit a copy. Now we are in the template section of the button, anything you edit in here is only relevant to your button. Delete all the contents except the template and the Grid in the tree at your left and the hit CTRL + V to paste in your new design.
Lets Animate!
At this point you will notice that in your Visual State Manager (VSM) just above your tree view panel, the state "Base" is selected, this is the standard state of your button when its not doing anything, I have set all my "fire" shapes to 0% transparency, to do this select your fire shapes in the tree view, and then over at the right hand side panel select the properties tab, under there you should be able to edit the transparency.
Select your MouseOver state from the VSM and then press the show time line button just above the tree view. 
Using the time line, create animations by editing an object then dragging the time line marker (orange line with triangle at top) along and editing the item again. I have changing the angle, shape, transparency and size with the animations but not using any specific pattern.
Once you are happy with your "fire" animation, just next to the show time lines button there should be the name of the state with a red "Record Dot" next to it, click the state name "MouseOver" and then in your properties menu you should be able to edit the repeat behavior, I am setting mine to Forever so when you are hovering over the button, the fire just keeps swirling around. 
> 
And now if you run the application you should have a working hover for your button. For the pressed state, I am just going to grab my icon and shift it down and left 1 px to make it look like its being depressed. So simply select the Press state on your VSM panel and then moved the icon down and left 1px (use your arrow keys for specific pixel movement). Now you should have a nice template for your button, if you want to make a new button with a few subtle changes (like the icon) create a new button, right click and go to Edit Control Parts (template) and then select Apply Resource > Resource name.
Now your button should look like the other one, from there just right click > Edit Control Parts (templates) > Edit a copy. Here you can edit the button without affecting the first button.
AND DONE!
This tutorial was taken from AGKDesign.blog
Thanks for reading.
About the Author
Alex Knight
Alex is a Graphic Designer who can't get enough of Silverlight. He spends his days designing websites and application UI/UX for AGKDesign and Objectify, as well as maintaining SilverZine.com and his own blog. If you would like to catch up with him, here are some links that might help:AGKDesign.twitter | AGKDesign.blog | AGKDesign.net | AGKDesign.silverlight
