CSS实现button按钮的点击效果

码飞飞

已于 2023-07-04 17:49:07 修改

阅读量1.7w

点赞数 7

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

于 2020-05-24 13:01:19 首次发布

本文链接：https://blog.csdn.net/weixin_43820866/article/details/106313349

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

需求

如下图所示，如果我们要实现这样的按钮点击效果，用CSS怎样去实现呢？
在这里插入图片描述

实现

个人方法是通过伪元素before结合button的伪类active来实现，上代码：

HTML:

<button class="primary-btn">主要按钮</button>

CSS:

.primary-btn {
  font-size: 14px;
  color: #fff;
  height: 44px;
  padding: 0 15px;
  background-color: #07c160;
  border: 1px solid #07c160;
  line-height: 1.2;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
  outline: none;
  position: relative;
}
.primary-btn::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #000;
  border: inherit;
  border-color: #000;
  border-radius: inherit;
  transform: translate(-50%, -50%);
  opacity: 0;
  content: ' ';
}
.primary-btn:active::before {
  opacity: 0.1;
}