Button value text

HTML & CSS
1

Is there any way I can change the button length bit bigger ?

here is my button css

.my_button {
background: url(“…/images/login_button.gif”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
font-size: 11px;
font-weight: bold;
height: 22px;
width: 76px;
}

I am worried because I have image here i.e login_button.gif.

shall I increase width or button image size ?

the reason I want this , my application is multi-lingual …when I change language button value text becomes larger and button text goes out…so I want to make the button little bit larger .

Is it possible ? what changes I should be doing here ?

2

One solution is to use the BUTTON tag without a background image…

HTML
<button type="submit" class="my_button">Login</button>

CSS
.my_button {
background: #000;
border: medium none;
font-size: 11px;
font-weight: bold;
height: 22px;
display: inline-block; /* lets the button find it's own width depending on text length */
}
3

I require the image. …thats a nice looking round corner image.

anyway , I have found a workaround,

I have updated these …

height: 26px;
width: 90px;
background-size: 100%; ..

this fixes the issue.

Thanks for your time and post.

4

background-size is not supported by IE8 and before ([U]caniuse.com/#search=background-size[/U]).

If you want IE8 and before, you can do it with a long background images hooked on 2 elements: 1 element for the left side with big width, and 1 small element for the right corners; both inside the button-div.
It is the principle of the “[U]Sliding Doors[/U]”.
See also [U]kailoon.com/css-sliding-door-using-only-1-image/[/U].