四种链接状态分别是:
- a:link - 正常的,未访问的链接
- a:visited - 用户访问过的链接
- a:hover - 用户将鼠标悬停在链接上时
- a:active - 链接被点击时
<style>
a:link, a:visited {//未访问、访问过
background-color: #07c160;//设置背景颜色
color: white;//设置字体颜色
padding: 14px 25px;//设置内边距,上下:14px,右左:25px
text-align: center; //文本居中
text-decoration: none; //文本装饰设置没有
display: inline-block; //设置行内块元素,结合了行内和块级的特点,可以设置长宽,可以让padding和margin生效,和其他行内元素并排
}
a:hover, a:active {//鼠标悬停、点击
background-color: red;
}
</style>
</head>
<body>
<a href="/index.html" target="_blank" >按钮</a>
</body>
效果:
未鼠标悬停、未点击的效果:
鼠标悬停: