Image Only button Tutorial


To make a simple button that contains image only, you should use SkinStyle="imageOnly". File imageOnly.css is contained in SuperButton/osb_data/osbSkins/ folder (downloaded zip).

Let's make image button undo.
We make main image in PhotoShop and name it undo_normal.gif .
We want our button have Hover Effect, so we make another image and name it undo_hover.gif .
If we want our button have another image on Disabled status (not ), we make another image and name it undo_disabled.gif .
At last we make an image for  Pressed Effect and name it undo_normal.gif .
We place all our images into SuperButton/osb_data/osbImages/ folder.

Important. All images should have equal dimensions.

That's all.

Now let's use our new button

<osb:SuperButton runat="server" SkinStyle="imageOnly"
  SkinFolder="/SuperButton/osb_data/osbSkins"
  ScriptFolder="/SuperButton/osb_data/osbScript"
  ImageFolder="/SuperButton/osb_data/osbImages"
  ImageNormal  ="undo_normal.gif"
  ImageDisabled="undo_disabled.gif"
  ImageHover   ="undo_hover.gif"
  ImagePressed ="undo_pressed.gif"
/>

And we have a button



"Congratulations by your good job in obout controls. I have proud in use this controls because they have a best quality that i never saw before."

Carlos Barata