当前位置:   article > 正文

CSS实现button按钮的点击效果_按钮点击效果 css

按钮点击效果 css
需求

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

实现

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

HTML:

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

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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/297263
推荐阅读
相关标签
  

闽ICP备14008679号