CSS实现的鼠标经过按钮的效果_鼠标经过home按钮效果-优快云博客

本文链接：https://blog.youkuaiyun.com/softwave/article/details/1752473

本文介绍如何使用CSS来创建鼠标经过按钮时的动态效果，详细探讨了相关CSS类和属性的应用。

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

点击这里使用E-mail订阅本Blog：

鼠标经过的效果

在一网页看到一效果，就是鼠标移上按钮时，按钮是突起的，鼠标移走后，就又恢复为平的了，我本以为是翻转图片，后下载下来看，它是一个小表格，在上面用了样式。
代码如下：

<style>

.style1 {background-color:#CCCCCC;border-left:1px solid #F5F5F5;border-top:1px solid #F5F5F5;border-right:1px solid #333333;border-bottom:1px solid #333333;width:80px;height:20px;}

.style2 {background-color:#CCCCCC;border-left:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #F5F5F5;border-bottom:1px solid #F5F5F5;width:80px;height:20px;}

</style>

<table id=myButton><tr><td align=center onMouseover=this.className='style1' class=style2 onMouseout=this.className='style2' >Button</td></tr></table>

【转自：http://bbs.blueidea.com/thread-1421781-1-1.html】点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" />