Creating User Interface Elements with Filters and Transitions
These buttons are created in HTML using CSS attributes and the Blur and Alpha filters to create the button effects for the mousedown and mouseover events. The buttons are created by adding a blur effect to the borders of the element to create a beveled appearance. Different levels of opacity are applied, using the Alpha filter, to emphasize the button states.




Rather than switching images, these buttons use only one image for each button with the BasicImage filter used to create a grayscale of each image. Mouse over the images to see the effect.



Click Me!


The white button below uses a fade transition to create mouseover states. The gold button below uses dynamic positioning with a drop shadow to create an active button effect.

© 2006 Microsoft Corporation. All rights reserved. Terms of use.