Question

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 possible? and how should I go since this is an slightly difficult button.

Thanx a lot 🙂

Answer 1

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.