问题描述
我在寻找实现我的形式可重复使用的CSS按钮的好方法。要求：
- 独立的图片和文字（文字有许多语言）
- 翻转效果
- 播放好听的跨浏览器
- 没有使用Javascript（如果可能）
- 圆角
I'm looking for a good way to implement reusable buttons in CSS on my forms. The requirements:- Separate image and text (text is in many languages)- Rollover effects- Plays nicely cross browser- No javascript (if possible)- Rounded corners
最新最好的方式做到这一点？几年前，我用的是推拉门技术，但现在这似乎已经过时了。你会使用CSS3与旧版本浏览器回退？任何特别是经过深思熟虑的技术在那里？
Whats the best way to do this? Years ago I was using the sliding doors technique, but this seems out of date now. Would you use CSS3 with a fallback for older browsers? Any particularly well thought of techniques out there?
推荐答案
我会用这个CSS精灵。你可以在这里找到它们：
I would use css sprites for this. You can find out about them here:http://css-tricks.com/css-sprites/
这基本上是一种方法，使具有按钮的所有状态一个大图像（正常，悬停，选择）。这样做的好处是一个HTTP请求和你没有看到闪烁首次悬停发生。如果你使用这条路线，CSS的background属性将是图像。然后，可以使用文本对齐和行高为中心，你要放置在图像中的文本。
It is basically a way to make one large image that has all states of buttons(normal, hover, selected). The benefit is it is one http request and you don't see a flicker the first time a hover occurs. If you use this route, the css background property will be the image. You can then use text-align and line-height to center the text that you want to place over the image.
这篇关于CSS表单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！