HTML创建带颜色有立体感的超链接按钮完整代码

以下是一个简单的HTML代码段，可以创建一个带颜色、有立体感的超链接按钮：

<a href="#" class="button">Click me!</a>

<style>
.button {
  display: inline-block;
  padding: 0.5em 1em;
  background: linear-gradient(to bottom, #bfbfbf, #d9d9d9);
  color: #444;
  text-decoration: none;
  border: 1px solid #999;
  border-radius: 0.5em;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}
.button:hover {
  background: linear-gradient(to bottom, #d9d9d9, #bfbfbf);
  color: #222;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
</style>

解释：

- `<a href="#">Click me!</a>` 创建一个超链接按钮，其中 `href="#"` 可以用来指定点击按钮时的行为。
- `.button` 是一个 CSS 类，用来指定按钮的样式。
- `display: inline-block;` 将按钮设置为行内块元素，以便可以设置宽度和高度。
- `padding: 0.5em 1em;` 设置内边距，使按钮看起来更宽一些。
- `background: linear-gradient(to bottom, #bfbfbf, #d9d9d9);` 设置背景颜色为一个从上到下的渐变，使按钮看起来有立体感。
- `color: #444;` 设置文本颜色为灰色。
- `text-decoration: none;` 去掉下划线。
- `border: 1px solid #999;` 设置边框为一个灰色的实线。
- `border-radius: 0.5em;` 设置边框圆角为半个字号。
- `box-shadow: 2px 2px 3px rgba(0,0,0,0.3);` 添加一个轻微的阴影，增加立体感。
- `:hover` 伪类表示当鼠标悬停在按钮上时的样式。
- `background: linear-gradient(to bottom, #d9d9d9, #bfbfbf);` 将背景颜色修改为从下到上的渐变。
- `color: #222;` 将文本颜色修改为黑色。
- `box-shadow: 2px 2px 3px rgba(0,0,0,0.5);` 将阴影加深，增加立体感。