DIV教程之CSS实例:创立一个鼠标感到换图片的按钮

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
破洛洛文章简介：这个CSS教程将教你怎样利用CSS制造一个大度的静态按钮，所谓静态，指的是默许形态和聚焦形态时背景按钮图片纷歧样.
这个CSS教程将教你怎样利用CSS制造一个大度的静态按钮，所谓静态，指的是默许形态和聚焦形态时背景按钮图片纷歧样，让我们看一下这是怎样完成的:

登录/注册后可看大图

滑动门
由于我们但愿我们的按钮是天真的，我们将要作出的背景图象，能够文本主动改动巨细。关于这一点，我们就专心爱的滑动门手艺;两个互补图片所制造出来的幻觉，一个默许的，一个点击时呈现的。
我们的按钮，将是一个基础的标签嵌套<a>和<span>，然后给每个分歧的层指定分歧的背景图象。上面是HTML代码：
<ahref=”#”class=”button”><span>Bringworldpeace</span></a>
接着，我们必要的是两张明晰的背景图片，分离利用在默许和聚焦形态上面：

登录/注册后可看大图

我们将用这两张图片在CSS上面到达按钮的幻化效果，而不必要利用任何Javascript。背景图片应当设置一个公道的高度和宽度。好比这里，我们设定宽为300px,高为24px。
上面是分离是和的背景图片。
SPAN

登录/注册后可看大图

A

登录/注册后可看大图

款式化按钮
最初，我们必要一个CSS对按钮举行款式化，使这统统都接洽在一同。由于我们要在此过程当中，要对span和a元素增添到浮动属性，以是，我们对整下款式举行一个扫除浮动：
.clear{/*genericcontainer(i.e.div)forfloatingbuttons*/overflow:hidden;width:100%;}a.button{background:transparenturl(bg_button_a.gif)no-repeatscrolltopright;color:#444;display:block;float:left;font:normal12pxarial,sans-serif;height:24px;margin-right:6px;padding-right:18px;/*slidingdoorspadding*/text-decoration:none;}a.buttonspan{background:transparenturl(bg_button_span.gif)no-repeat;display:block;line-height:14px;padding:5px05px18px;}我们如今已有了一个大度的按钮，但他还没有到达聚焦时所必要的转换效果，以是，我们还必要到场：
a.button:active{background-position:bottomright;color:#000;outline:none;/*hidedottedoutlineinFirefox*/}a.button:activespan{background-position:bottomleft;padding:6px04px18px;/*pushtextdown1px*/}OK，半途而废。但必要注重的是，光靠下面的办法，不克不及一般运转于IE扫瞄器上面，以是，要让他在IE上也能事情，你必要在a标签里利用到:
<ahref=”#”onclick=”this.blur();”class=”button”>…</a>
翻译的不是太流利，早晓得的话用本人的话注释了。假如下面的看不分明，你能够点击这里检察英文原文教程：HowtomakesexybuttonswithCSS。

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。