本文分享了一种使用CSS实现的按钮悬停效果教程。通过改变按钮在鼠标悬停时的样式，使按钮呈现立体感。文章提供了具体的CSS代码示例，包括两个不同状态的按钮样式，以及如何在HTML中应用这些样式。
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
点击这里使用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：
鼠标经过的效果
代码如下：
<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：
给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
