Thread: Button Class

Originally Posted by jmurrayhead

What if you set a lineheight? (i.e. line-height: 2em; )

That seems to have sorted it. That was doing my head in!!

Thanks J...

richy, I like that button. Can you post an attachment with full images as well as style sheet???

The various classes are:-

Code:

.button_green { display:inline-block; height:20px; line-height:20px; border:solid 1px #325CAB; position:relative; padding:0px 25px 0px 3px; margin:0px 0px 0px 0px; background-color:#FFFFFF; background-image:url('/images/button_border_green1.gif'); background-position:right; background-repeat:no-repeat; font-family: "Arial", "Verdana"; font-size:10pt; color: #000066; text-decoration:none; font-weight:bold; }
.button_orange_cross { display:inline-block; height:20px; line-height:20px; border:solid 1px #325CAB; position:relative; padding:0px 25px 0px 3px; margin:0px 0px 0px 0px; background-color:#FFFFFF; background-image:url('/images/button_border_orange_cross1.gif'); background-position:right; background-repeat:no-repeat; font-family: "Arial", "Verdana"; font-size:10pt; color: #000066; text-decoration:none; font-weight:bold; }
.button_orange_arr { display:inline-block; height:20px; line-height:20px; border:solid 1px #325CAB; position:relative; padding:0px 25px 0px 3px; margin:0px 0px 0px 0px; background-color:#FFFFFF; background-image:url('/images/button_border_orange_arrLeft1.gif'); background-position:right; background-repeat:no-repeat; font-family: "Arial", "Verdana"; font-size:10pt; color: #000066; text-decoration:none; font-weight:bold; }
.button_red_cross { display:inline-block; height:20px; line-height:20px; border:solid 1px #325CAB; position:relative; padding:0px 25px 0px 3px; margin:0px 0px 0px 0px; background-color:#FFFFFF; background-image:url('/images/button_border_red_cross1.gif'); background-position:right; background-repeat:no-repeat; font-family: "Arial", "Verdana"; font-size:10pt; color: #000066; text-decoration:none; font-weight:bold; }
.drop_shadow {  float:left;
  background: url('/images/drop_shadowAlpha.png') no-repeat bottom right !important;
  background: url('/images/drop_shadow.gif') no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
  }
.drop_shadow span { display: block;
  position: relative;
  margin: -5px 5px 5px -5px;
  padding:2px 0px 0px 1px;
}

To use in a page have:-

Code:

<span class="drop_shadow" style="float:right">
<span>
<a onclick="window.location='#top';set_cookie_jar('textarea');" id="ctl00_main_content_frmAdd" class="button_green" href="javascript:__doPostBack('ctl00$main_content$frmAdd','')">Add</a>
</span>
</span>

My example uses an asp.net linkbutton control, but I have posted the rendered HTML so you can see how it works.

I've also attached a zip containing the images I used.

If you need anything else, let me know.

<edit>The style="float:right" was because I wanted the button to align to the right of another element. You could dispense with this or change it accordingly.</edit>

I'm having a problem center aligning this button.

Code:

<td style="width:100%;text-align:center;height:40px;vertical-align:middle;" colspan="3">
<span class="drop_shadow">
<span>
<asp:LinkButton ID="lnkLogin" runat="server" ToolTip="Login" Text="Login" CssClass="button_green" OnClick="user_login" />
</span>
</span>
</td> 

If I add style="float:none" to the drop_shadow span then it centers it but I lose the drop shadow.

Any ideas?

Try setting a padding for the table cell. (i.e. padding: 5px auto

no..Makes no difference.

I think the problem is that the drop_shadow class has a float:left element to it.

The only other thing that I can think of would be to change the drop_shadow and drop_shadow class margins so that they use auto.

Hmmm...Still no joy..

OK I just added a padding-left:45% to the table cell.

That seems to have sorted it satisfactorily...