以下是一个简单的
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);` 将
阴影加深，增加立体感。
扫一扫
1131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
