Blend Candy : Another Blue Glowing Glass Button in the style of Web 2.0

 

Does anyone else here like the Windows Media Player UI besides me? I have to admit that I’m a sucker when it comes to rich dark colored UI’s. I love black and I love the glass effect.

[screen shot of my Windows Media Player 11 – Beautiful and black!]

What really stands out for me are the buttons, the glowing glass buttons. Mesmerizing, elegant and perfectly functional. Hover over a button and it glows blue, or red depending on the type of button.

           

I’m going to recreate these beautiful glass buttons in Blend. I’ll do it in such a way that the glow can be controlled programmatically, so you can set it to what ever you want 🙂

[20 minutes later]

Here’s the result of my Blending, they are just xAML assets that haven’t been animated …

Picture (above): Default button

Picture (above): Blue glowing button

Picture (above): Red glowing button

So now begins the fun bit, explaining how I created these!

Step 1: Create the outline for the button as a “black shape” with rounded corners. Duplicate this 4 times and name the layers as follows:

 

darkBackground Layer: This pretty much stays as is, it will provide the dark background for the actual button. [Important: Opacity for this layer is 100% and it sits as the top most layer]

Step 2: glowEffect Layer: This is the eye candy of the whole thing. This layer gives the glowing effect, you can change the color of the glow very easily in this layer. [Important: Opacity for this layer is 100%]

Step 3: ButtonForeground layer.  This layer gives the actual button it’s look, it has the shading and it allows the glow to shine through it. [Important: Opacity for this layer is 100%]

 

Step 4: GlassEffect layer. This layer is the sugar coating for the button. The result is a white shaded rounded rectangle at the top part of the overall button, this is so web 2.0. [Important: Opacity for this layer is 9% – gives the see through glass effect]

Take the original black rounded rectangle and resize it to half it’s original size. Then set it to a gradient brush with 2 color markers as follows:

Now set the gradient direction as follows:

Finally: combining all the layers results in the desired glass button

Overall this took around 20 minutes to create using blend. The fun bit will be to animate it which will come in some future posting. Or better yet one of you guys do it and send me an email and ill reference your sample from here 🙂

Source code for the xAML can be found here: GlowingBoard.zip

Link to other cool graphic assets can be found in my “Blend Candy” area.

Enjoy and remember to share what you can, were all still learning SilverLight and Blend!