通过CSS让button标签实现A标签的效果_button 做成a标签-优快云博客

本文介绍了一种使用HTML和JavaScript中的Button元素来美化菜单的方法。通过改变Button的状态样式，实现了鼠标悬停时的视觉效果变化。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们公司为了让菜单突出显示，于是我想到了用button来实现，显示的效果如下：

当鼠标离开button时：

当鼠标在button上时：

实现的代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.btOver{
background-image:url();
background-position:2px 0;
background-repeat:no-repeat;
background-color:#00FFFF;
font-size:12px;
padding-left:16px;
cursor:hand;
}
.btOut{
background-image:url();
background-position:2px 0;
background-repeat:no-repeat;
background-color:#FFCCFF;
font-size:12px;
padding-left:16px;
cursor:default;
}
</style>