In order to override the default look, feel and state effects of the built in Silverlight Button control you will first need to either edit the default template for the button or else create a brand new template. The quickest way to accomplish this is to use Expression Blend, which is a Microsoft Applicaiton included in the Expression Studio software suite but which can also be purchased separately.

(Creating a new Silverlight Application Project is not covered here)

Once you have added the button, to which you want to apply a custom look and feel, to the page move to the ‘Objects and Timeline’ window to the left of your screen. Select the new button by double clicking it in the object list. Right click it, go to ‘Edit Control Parts (Template)’ << see image 'Button Template Edit Menu‘>> , in the flyout menu there will be various options for editing the button’s template.  The options are as follows:

1. Edit Template –  allows you to edit the template that is currently associated with the button. Opens the template for editing in the main window.
2. Edit a Copy – allows you to edit a copy of the template currently associated with the button. Opens the ‘Create Resource’ dialog allowing you to choose where the new template resource will be located*.
3. Create Empty – allows you to create a completely empty template for the button. Opens the ‘Create Resource’ dialog allowing you to choose where the new template resource will be located*.
4. Apply Resource – allows you to apply an already existing template to the button. Opens a drop down list displaying all the existing template which can be applied to the button.

*The ‘Create Resource’ dialog <<see image 'Template Resource Location‘>> allows you to give the new template resource a unique name by which it can be referenced. It also allows you to decide if the template is local to the current page you are working in or if it should be global to the entire applicaiton. If you select local the template is created in the XAML of the page you are working in and can only be applied to buttons on that page. If you select Appliation (global) the template is then created in the App.xaml file and it is now available to all pages in the applicaiton and can be applied to any number of buttons.

Once you have decided what type of template you are going to use (existing, copy of existing, empty) and decided where it will be located in the applicaiton the workspace opens up to the template XAML and you can begin adding your custom images or vectors to the button and its various states. As you can see in the ‘Objects and Timeline’ window the buttons default states are already there and waiting with the ‘base’ (this is the state the button is in before any user interaction) already selected.

A simple button with just 2 states, base and MouseOver would contain just 2 images. With the base state selected go ahead and add two image controls and point each of them to their associated state images, making sure that the MouseOver image is the top most. once they are aligned and sized to display correctly go ahead and set the opacity value to 0% for the MouseOver image. <<see image 'Button Template Edit States‘>>

To make the MouseOver effect select the MouseOver state in the State window, it should appear white highlighted <<see image 'Button Template State Recording‘>>. You will now see the red box appear around the workspace notifying you that the state recording is on. Select the MouseOver image and set its opacity to 100% to make it visible. Save your changes and then click back to the page you were working on. Run the project (f5) and move your mouse on and off the button to see the results.