HTML创建带颜色有立体感的超链接按钮完整代码
时间: 2023-01-29 15:40:03 浏览: 128
实现超链接风格的按钮
可以使用HTML的`<style>`标签来设置按钮的样式,具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置按钮样式 */
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
/* 设置按钮悬浮时的样式 */
.button:hover {
background-color: #3e8e41
}
/* 设置按钮按下时的样式 */
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<!-- 创建带颜色有立体感的超链接按钮 -->
<a href="#" class="button">按钮</a>
</body>
</html>
```
在上面的代码中,我们使用了HTML的`<style>`标签来定义按钮的样式。在样式中,我们设置了按钮的颜色、字体大小、边框圆角等属性,并且通过`:hover`和`:active`伪类来定义按钮悬浮和按下时的样式。
最后,我们在HTML文档中使用`<a>`标签创建了一个超链接按钮,并将按钮的样式应用到按钮上,通过给`<a>`标签添加`class`属性,并将其设置为`button`,就可以将定义好的按钮样式应
阅读全文