【css】css实现一个简单的按钮

最新推荐文章于 2023-09-01 21:01:50 发布

科学熊

最新推荐文章于 2023-09-01 21:01:50 发布

阅读量783

点赞数 1

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_22744093/article/details/132054969

版权

前端专栏收录该内容

80 篇文章 1 订阅

订阅专栏

四种链接状态分别是：

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>