This is the archived version of Roland Weigelt's weblog that ran from 2003 to 2023 at weblogs.asp.net

Nice Buttons

As I wrote in my first post, I'm currently developing some kind of "DJ software" in my spare time. The first versions grew by adding feature by feature over several years, the new version is a complete rewrite from bottom up. This whole project will take a lot of time, with lots of coding to be done before there's actually something usable.

While I'm implementing the framework, I also work on "visible" stuff to keep my motivation up (this is a private project, and I don't expect making [much] money from it). Something "visible" is e.g. the audio player control. I don't use the Windows Media Player control directly, instead I'm using the (non-GUI) WMP object hidden behind an abstraction layer, which is accessed by a user control showing the GUI..

A GUI for a player has to be cool (but no "unusable 1337 skinz", please), including nice looking buttons for "start/stop/pause/etc.". So here's what my buttons look like:

Nice, huh? So how much effort went into those buttons? Very little. If you're not looking for a "100% perfect" solution, you can get pretty good results just playing around with the properties "BackColor", "BackgroundImage" and "Image" of a WinForms button.

  • Step 1: Decide how high the button will be; for this example, let's choose a height of 32 pixels. The width doesn't play a role as the image can be repeated horizontally without looking bad. Fire up your favorite paint program, create a 32x32 image and perform a vertical gradient fill from white (#FFFFFF) to gray (#C0C0C0):
  • Step 2: Let's try it in VS.Net:
    • Put a button on a form, 32 pixels high.
    • Set the "BackColor" to white
    • Set the "BackgroundImage" property
    This is the result:
  • Step 3: Design the button image:
    and save it as a GIF file with transparent background:
  • Step 4: In VS.Net, clear the button text and set the "Image" property:
  • That's it!

Remarks:

  • Leave an empty pixel column/row at the right/bottom border of your button image, otherwise the image will not appear centered on the button.
  • Of the background image, the outer 2 pixel rows/columns will not be visible, they are hidden behind the border of the button.

4 Comments

  • thanks for the tip, looks cool !

  • The "X" means: clear the current song from the player, so "play" will play the next song in the play list. This is an optimization for the use of the software in basketball games, where songs will be played for about 5-10 seconds, then paused. If the song (e.g. a party song) fits during the next interruption of the game, you press "play" to continue. But if it becomes clear that the song will not fit, you can press "X" to clear it, so you don't have to remember later to press "next".

  • cool. What about doing the Windows XP slightly transparent folder icons?

  • Hmm, I'm not quite sure about your question - could you be a bit more specific?


    Is it about semi-transparency? If so, I haven't tried button (foreground) images with an alpha channel yet.

Comments have been disabled for this content.