CSS实现button按钮的点击效果

需求

如下图所示，如果我们要实现这样的按钮点击效果，用CSS怎样去实现呢？

实现

个人方法是通过伪元素before来实现，上代码：

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;
}

CSS实现button按钮的点击效果相关推荐

纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
Winform中使用代码编写Button按钮的点击事件
场景一般在进行Winform窗体开发时都会拖拽一个Button,然后双击进入Button按钮的点击事件中,进行点击事件的编写. 如果窗体上事先没有Button按钮,是在代码中生成的Button按钮 ...
cocos2d-x中实现不规则按钮的点击效果
cocos2d-x中实现不规则按钮的点击效果先说一点,这是从别人那里扒来的,亲测有效觉得不错,分享一下: 原理很简单,就是判断按钮图片的点击区域像素点透明度是不是0,需要修改源代码: 我拿coco ...
HTML中jquery控制button按钮可点击、不可点击
HTML中jquery控制button按钮可点击.不可点击 1.首先来说button按钮不可点击 1.1第一种(html代码中控制) <button id="button_id&quo ...
每日分享html之两个input搜索框、两个button按钮、一个logo效果
我是c站的一个小博主,近期我会每天分享前端知识包括(原生的web语句,以及vue2和vue3,微信小程序的写法及知识点)本篇文章收录于html特效专栏中,如果想每天在我这学到一些东西,请关注我并订阅专 ...
5去掉button按钮的点击样式_CSS实现复古按钮
使用box-shadow属性来实现复古按钮的样式具体代码如下: <!DOCTYPE html> <html><head><meta charset=&quo ...
button按钮的点击样式解决
button按钮样式开发中使用button的时候点击会出现一个黑的的边框, 当我点击的时候这个按钮就会出现一个黑色的边框 ,即使之前设置边框样式也没用解决方法 : 在css样式中加入 outli ...

CSS实现button按钮的点击效果

需求

实现

CSS实现button按钮的点击效果相关推荐

最新文章

热门文章