is this image button reproducible in CSS cross browser?

Hi CSS savvies out there!

I got this image that I use as a submit button

Since the website will be multilingual, I don't want to create different images for each language.. so I want to make it a CSS cross-browser button.

Is it 开发者_Go百科possible? and how should I go since this is an slightly difficult button.

Thanx a lot :)

It's possible, but not easy. You could break it up into the following images:

1. Top left corner
2. Top right corner
3. Bottom left corner
4. Bottom right corner
5. Left border
6. Right border
7. Top border
8. Bottom border
9. Center

This is called the "9-patch" method. However, your bottom border contains a non-tilable glare. You could also add 2 more patches to this:

1. Bottom left stretchable pixels between the bottom left corner and the bottom border
2. Bottom right stretchable pixels between the bottom right corner and the bottom border

You can then wrap these elements in an inline-block div and use that as the button. There's also a new border-image property that you can use with CSS3, but it doesn't have good support yet.

You can embed the font with @font-face.

Create an image for button purple background (without text) and use it as a background for <input type='button' id='button_search' value='search'>.

CSS

input#button_search{
  background-image:url("imagename.png"); /*your image*/
  width:170px; /*width of your image*/
  height:43px; /*height of your image*/
  border:none;
  font-size:20px;
} 

The text 'Search' or in another language can be set as value of input.

What you could do is save the border of the button as an image(the bit with the shadow/emboss effect) and then set the middle part as a gradient in CSS. Not only with you be able to put whatever text you so wish, but the gradient effect is able to applied for most browsers. Check this out to generate your gradients.

Update: Instead of making an image for each, why not just do a sprite? Make the outside part of the image a background, then have another large image that contains the middle part(the part with "search") and just change the background position on that sprite for each different language.

Create an image without having the text, give an id to your input type="button" and a value="search"

e.g.

if your button is

<input type="button" id="yourButtonId" value="search" />

Using css select your button with id like, input#yourButtonId and use your image as a background of this button without repeating and proper positioning, giving the button a width and height property exactly as your button background image then style the text as your desire with css rules.

You could use CSS3 however not all browsers support that standard yet, but you could use a fallback so when the browser doesn't support CSS3 you can display a simple purple background for the button.

Cross-browser is very subjective and relative. If you mean modern browsers and don't count IE, sure. IF you count IE 1-9, Netscape Navigator 4.1, old Gecko browsers, etc., then of course not. First decide who your demographic is, and then decide if it's worth it to you to accommodate the minority with an image fallback or not.