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

四种链接状态分别是:

  • 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>

效果:
未鼠标悬停、未点击的效果:
【css】css实现一个简单的按钮_第1张图片
鼠标悬停:
在这里插入图片描述

你可能感兴趣的:(前端,css,前端)