a 标签链接按钮css鼠标划过特效

素材源码 汇享网 1823℃

将以下代码保存为html文件即可

<!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>a 标签链接按钮css鼠标划过特效</title>
<style type="text/css">
a {
text-decoration: none;
word-wrap: break-word;
}
.huixiang360{ text-align:center}

.bt-blue{font-size:14px;line-height:33px;background:#4899E0;font-weight:bold;color:#FFF;padding:10px 22px 12px;margin-right:12px; margin-top:12px;}
.bt-blue:hover{background:#368DD9;text-decoration:none}

.bt-green {font-size:14px;line-height:33px;background:#6FB934;font-weight:bold;color:#FFF;padding:10px 22px 12px; margin-right:12px; margin-top:12px;}
.bt-green:hover{background:#5FA924;text-decoration:none}

.bt-red{height:36px;text-align:center;line-height:36px;color:#fff;font-size:14px; font-weight:bold; border-radius:2px;background:#C00; margin-right:12px; padding:0 22px; display:inline-block; margin-top:12px;}
.bt-red:hover{background:#C90}

.bt-black{display:inline-block;height:36px;text-align:center;line-height:36px;color:#fff;font-size:14px; font-weight:bold; margin-right:12px;;border-radius:2px; background:#333333;padding:0 22px; margin-top:12px;}
.bt-black:hover{background:#F00}
</style>

</head>

<body>
<div class="huixiang360">
<p>来源:<a href="http://www.huixiang360.com/" target="_blank">汇享网</a></p>
</div>
<div class="">
<a class="bt-blue" href="/" target="_blank">效果预览</a>

<a class="bt-green" href="/">下载地址</a>

<a class="bt-red" href="/" target="_blank">联系咨询</a>

<a class="bt-black" href="/" target="_blank">查看演示</a>

</div>

<!--
演示代码整理:汇享网 www.huixiang360.com
-->
</body>
</html>

转载请注明:汇享网 » a 标签链接按钮css鼠标划过特效

喜欢 (4)or分享 (0)

精品资源

投稿