Thread: Button Class

At the moment I'm using images for my image buttons, but I thought I might try and achieve a similar effect by using a class on a button.

What I'm aiming for is something like the attached image.

This is the CSS I have so far, but there is a gap between the background image (which is just the green box with the white > arrow in it, positioned to the right) and the border.

Code:

.button_green { 
height:21px; 
border:solid1px#325CAB; 
border-collapse:collapse; 
padding:0px18px0px0px; 
margin:0px0px0px0px; 
background-color:#FFFFFF; 
background-image:url('/images/button_border_green.gif'); 
background-position:right; 
background-repeat:no-repeat; 
font-family: "Arial","Verdana"; 
font-size:10pt; color: #000066; 
text-decoration:none; 
font-weight:bold; 
} 

Any ideas how I can get the background image flush with the border?

<edit>Actually it seems to be working pretty well in FF. Just not in IE.</edit>

Try setting the padding to 0

Originally Posted by jmurrayhead

Try setting the padding to 0

The reason for the padding was to make sure the button text doesn't write over the top of the background image.

However, if I set the padding to 0px, there is still a gap between the bg image and the border....

Attached is the button I get using the CSS I posted..

A suggestion...

Since you're doing .Net, use a LinkButton instead of a Button and then style like demonstrated here: CSS Buttons [Sophie&rsquo;s maze]

Have used the same CSS on a linkbutton and that seemed to work pretty well...

Was kind of hoping to get the text movement when the button is clicked in IE, but as you don't seem to get that in FF, I'm not too bothered.

Any ideas on maybe adding the drop shadow, like the original image I posted?

At least it should save me having to create a new button image for each button type I want.

Try something like this: A List Apart: Articles: CSS Drop Shadows

OK. After a bit of fiddling, that seems to work reasonably well...Spot on in IE and only a tiny bit out in FF with the shadow on the right.
This is what I ended up with

Code:

<span class="drop_shadow" style="float:right">
<span>
<asp:linkbutton />
</span>
</span>

CSS

Code:

.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;
} 

The original css was affecting my button class, so I had to add in another span as a holder for the link button.

OK. Have come up with a problem with the height of the button.

The background image I'm using is 22px high.

I have to set the height of the linkbutton. If I change the height in the CSS it has no effect.

However, when I set the height to 20px, the text is not vertical aligning to the middle. I've tried adding vertical-align:middle; to the CSS and as a style on the linkbutton but it just stays at the top.

If I remove the height attribute of the linkbutton, it defaults to an auto height and the text sits in the middle, but I want to make the button higher. I can't add padding to the CSS because that puts a gap between the background and the border.

Any ideas?

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