CSS实现自动感应鼠标的漂亮网页按钮代码

最新推荐文章于 2025-01-25 11:22:42 发布

weixin_30689307

最新推荐文章于 2025-01-25 11:22:42 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/yqskj/articles/2211396.html

本文介绍了一种操作体验极佳的纯CSS按钮效果，通过使用三张按钮图片实现动态变化，支持文字自定义，方便修改。

操作体验极棒的纯CSS按钮效果，自动感应鼠标是否移到了按钮上，移上后按钮就发生了变化，制作时候用了三张按钮图片用以修饰美化，图片自己顺着地址扣下来吧。本按钮的文字可以自定义，因此修改起来非常方便。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>感应鼠标变化的实用按钮</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.btn{display:block;height:38px;padding-left:40px;background-image:url(/uploads/allimg/1105/soft_btn_1.gif);background-repeat:no-repeat;background-position:0px 0px;float:left;color:#000000;}
.btn_word{float:left;display:block;height:38px;padding:0 20px 0 10px;background-image:url(/uploads/allimg/1105/soft_btn_2.gif);background-repeat:repeat-x;background-position:0px 0px;line-height:33px;}
.btn_right{float:left;display:block;width:8px;height:38px;background-image:url(/uploads/allimg/1105/soft_btn_3.gif);background-repeat: no-repeat;background-position:0px 0px;}
.btn:hover{background-position:0 -38px;}
.btn:hover .btn_word{background-position:0 -38px;}
.btn:hover .btn_right{background-position:0 -38px;}
</style>
</head>
<body>
<a href="#" class="btn">
<span class="btn_word">烈火学院</span>
<span class="btn_right"></span>
</a>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>