New Text Only button Tutorial


Let's try to create a new simple style for Text Only button with name style1.
We'll create it in  a few steps.

  1. Create new folder SuperButton/osb_data/osbSkins/style1.
  2. For a simple Text Only button we create three background images in PhotoShop:     .
    We'll name these images:

    left - style1_left.gif,
    center -
    style1_center.gif,
    right - style1_right.gif.

    These images should be placed into folder SuperButton/osb_data/osbSkins/style1.

  3. Make a copy of file SuperButton/osb_data/osbSkins/blankTextButton.css from downloaded zip. Rename it to style1.css.

  4. Now edit this CSS file: replace all "blank" text entries with "style1".

  5. Our background images have height 22px, so we edit the first class in CSS file.

    table.osb_style1
        {
          /* set here real height of background images used in cells */
          height:22px;
          margin:0px; padding:0px;
          overflow:visible;
        }

  6. Now we edit classes for cells. Left background image has width 8px, right one - 23px.

    table.osb_style1 table td.tr2td1
        {
          /* set here real height and width of background image */
          width:8px;height:22px;
          /* set here url of real background image */
          background-image: url("style1/style1_left.gif");
        }

    table.osb_style1 table td.tr2td3,table.osb_style1 table td.tr2td2
        {
          /* set here real height of background image */
          height:22px;
          /* set here url of real background image */
          background-image: url("style1/style1_center.gif");
          background-repeat:repeat-x;
          /* set here font properties for inner text */
          font-size:12px;font-family:verdana;font-weight:500;
        }

    table.osb_style1 table td.tr2td4
        {
          /* set here real height and width of background image */
          width:23px;height:22px;
          /* set here url of real background image */
          background-image: url("style1/style1_right.gif");
        }

That's all.

Now let's use our new button style

<osb:SuperButton runat="server" Text="Text Button" SkinStyle="style1"
   SkinFolder="/SuperButton/osb_data/osbSkins" ScriptFolder="/SuperButton/osb_data/osbScript"
/>

And we have a button

Text Button



Hover effect

Let's make our button change its appearance on hover. We'll make it in a few steps.

  1. Let the button change its text color on hover, so we add next fragment into our CSS file:

    /* hovered button's inner TABLE */

    table.osb_style1 table.enabled_hover,table.osb_style1 table.active_hover
        {

          /* text color on hover */
          color:#0000FF;
        }

  2. Create three new background images for button's hovered status in PhotoShop:     .
    These images should have the same sizes as ones created before. We'll name these images:

    left - style1_left_hover.gif,
    center -
    style1_center_hover.gif,
    right - style1_right_hover.gif.

    These images should be placed into folder SuperButton/osb_data/osbSkins/style1.

  3. And now we add next fragment into our CSS file:

    /* hovered cells styles */

    table.osb_style1 table.enabled_hover td.tr2td1,
    table.osb_style1 table.active_hover  td.tr2td1
        {
          background-image: url("style1/style1_left_hover.gif");
        }

    table.osb_style1 table.enabled_hover td.tr2td3, table.osb_style1 table.enabled_hover td.tr2td2,
    table.osb_style1 table.active_hover  td.tr2td3, table.osb_style1 table.active_hover td.tr2td2
        {
          background-image: url("style1/style1_center_hover.gif");
        }

    table.osb_style1 table.enabled_hover td.tr2td4,
    table.osb_style1 table.active_hover  td.tr2td4
        {
          background-image: url("style1/style1_right_hover.gif");
        }

And we have a button

Text Button


Pressed effect

Let's make our button change its appearance on mouse click. We'll make it in a few steps.

  1. Let the button change its text color on mouse click, so we add next fragment into our CSS file:

    /* presseded button's inner TABLE */

    table.osb_style1 table.enabled_pressed,table.osb_style1 table.active_pressed
        {

          /* text color on click */
          color:#FFFFFF;
        }

  2. Create three new background images for button's pressed status in PhotoShop:     .
    These images should have the same sizes as ones created before. We'll name these images:

    left - style1_left_pressed.gif,
    center -
    style1_center_pressed.gif,
    right - style1_right_pressed.gif.

    These images should be placed into folder SuperButton/osb_data/osbSkins/style1.

  3. And now we add next fragment into our CSS file:

    /* pressed cells styles */

    table.osb_style1 table.enabled_pressed td.tr2td1,
    table.osb_style1 table.active_pressed  td.tr2td1
        {
          background-image: url("style1/style1_left_pressed.gif");
        }

    table.osb_style1 table.enabled_pressed td.tr2td3, table.osb_style1 table.enabled_pressed td.tr2td2,
    table.osb_style1 table.active_pressed  td.tr2td3, table.osb_style1 table.active_pressed td.tr2td2
        {
          background-image: url("style1/style1_center_pressed.gif");
        }

    table.osb_style1 table.enabled_pressed td.tr2td4,
    table.osb_style1 table.active_pressed  td.tr2td4
        {
          background-image: url("style1/style1_right_pressed.gif");
        }

And we have a button

Text Button