CSS控制<a>标签变为button

CSS技巧：文字链接变3D按钮

最新推荐文章于 2022-05-07 14:22:47 发布

最新推荐文章于 2022-05-07 14:22:47 发布 · 1.2k 阅读

文章标签：

#xhtml

本文介绍了一种使用CSS将简单的文字链接转换为具有3D效果按钮的方法。通过设置特定的样式属性，例如边框、背景颜色和悬停效果等，可以让链接看起来更像是一个交互式的按钮。

这是我看到的一段代码，有兴趣可以试一下哦，我觉得很有意思，可以将你页面的超链接变成button。

<!DOCTYPEhtmlPUBLIC "//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS让文字链接变为3D按钮 -www.enzit.cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
a{ display:block; width:70px;
height:16px;
border:2px outset #eee;
background:#eee; text-align:center;
font-size:12px; color:#000; text-decoration:none; padding-top:2px; }
a:hover{ border:2px inset #eee; background:#CCCCCC; text-decoration:none; } </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>