在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻腾(CSS rollover)标记的开发速度和效率，从而无效地提高按钮外表图像的三维效果。
 
相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，由于你只需求为空白按钮外面建立和载入一个图像，而不是为每一个按钮建立各自的图像。

同一个图像可以使用在网页所有按钮的背景。按钮的文本标签都是简单的CSS风格文本。

事后载入的
图形/CSS混合风格的为数不多问题之一是对翻腾效果有所限制。使用这一技术的最简单的方法是，指定CSS风格文本的翻腾效果，并使用所有翻腾形状(rollover states)的相反按钮外形图像。这可以给你带来快速、简约的翻腾效果，但在一定程度上限制了你的开发选项。

你也可以建立一些可交替使用的按钮图像并构建你的CSS规则，以为不同的翻腾形状改变背景图像。然而，这些方法给你带来更多灵活的设计，但当浏览器初次载入图像文件时，这些可交替使用的铵钮图像会出现延迟景象(除非你采用事后载入按钮图像的方法)。

事后载入图像技术已被人熟知，而且也被人们所接受。问题是事后载入图像添加了网页载入和出如今访问者浏览器的时间。用户访问的第一二分钟非常关键，所以你无论如何都必须使得网页的初始化愈加快速。使用图形/CSS混合按钮可以减少图像事后载入的时间，当然如果事后载入能够消弭，页面的初始化则愈加快速。

没有延迟的翻腾──不使用事后载入图像
我曾经找到一种创新的方法，这种方法可以满足不同的翻腾形状的可交替使用的按钮图像，而其中不需求任何图像文件的载入。我第一次接触这一技术是在网络设计者捷克人Petr Stanicek的站点上的文章上发现的。

为了获得一个典型的按钮翻腾效果，你通常需求建立三个独立的图像，如图A所示。其中一个是普通的按钮，一个是悬浮形状，以及一个是激活形状。普通按钮的图像文件将成为初始化页面载入的一部分，但其它两个图像将被分开地载入，这样使得它们能够在用户的浏览器中得以使用。

无事后载入翻腾技术通过结合所有三个按钮外表图像而成为单一图像文件而得以实现，如图B所示。然而，不需求为每一翻腾形状指定不同的背景图像文件，你指定的是合成图像的位置偏移量。在页面初始化载入过程中，合成图像文件能够自动地载入，所以无需求事后载入；而且，在浏览器获得不同图像文件过程中也没有时间上的延迟。

超大图像与背景图像位置偏移的结合使用可以使你有选择性地为每一按钮形状显示图像的不同部分。按钮文本的CSS框尺寸决定着显示在浏览器的背景图像的百分比。

对于这一技术，你必须清楚按钮外表的确切水平和垂直尺寸，并正确使用这些尺寸，才能建立图像文件和按钮的CSS规则。