CSS立体按钮教程_Div+Css_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

CSS立体按钮教程

来源：未知作者：类型：图文教程点击次数：发布时间：2015-10-22 12:47:10

先看下效果图：

css立体立即抢购按钮

这个立体按钮，完全是css写的(除了圆角用的是css3的border-radius)，其实很简单，底部是边框，上面纯色，鼠标放上去的时候，将按钮颜色变亮，给边框加粗，按下去，给边框变细，颜色变深。这里需要注意的一点，如果不用定位，鼠标按下去和附上去，按钮不会网上动，而是往下动，所以给它定位，让它“bottom:0px”即可。代码如下：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS立体按钮教程 - 我爱模板网 www.5imoban.net</title> <style> div{position:relative; width:250px; height:70px;} a{text-decoration:none; color:#fff; font-size:20px; display:inline-block; width:250px; height:65px; text-align:center; line-height:65px; background:#00d072; border-bottom:5px solid #00af5e; position:absolute; bottom:0px; left:0px; border-radius:3px 3px 0 0;} a:hover{background:#04e37e; border-bottom-width:7px;} a:active{background:#0cce74; border-bottom-width:4px;} </style> </head> <body> <div> <a href="javascript:;">立即抢购</a> </div> </body> </html>
提示：您可以先修改部分代码再运行