纯css自定义button按钮的点击特效，实现背景变化

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>.btn-default {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;color: #333;background-color: #fff;border-color: #ccc;text-shadow: 0 1px 0 #fff;background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image: -o-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat: repeat-x;border-color: #dbdbdb;border-color: #ccc;
}.btn-default:active, .open>.dropdown-toggle.btn-default {background-image: none;
}
.btn-default:active, .open>.dropdown-toggle.btn-default {color: #333;background-color: #e6e6e6;border-color: #adadad;
}
.btn-default:hover {color: #333;background-color: #e6e6e6;border-color: #adadad;
}
.btn.active, .btn:active {background-image: none;outline: 0;-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}.btn.focus, .btn:focus, .btn:hover {color: #333;text-decoration: none;
}</style>
</head>
<body><div class="btn-default">我是按钮</div>
</body>
</html>

以上就是关于“ 纯CSS自定义button按钮的点击特效 ” 的全部内容。

纯CSS自定义button按钮的点击特效相关推荐

CSS实现button按钮的点击效果
需求如下图所示,如果我们要实现这样的按钮点击效果,用CSS怎样去实现呢? 实现个人方法是通过伪元素before来实现,上代码: HTML: <button class="prima ...
从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
Android 自定义Button按钮显示样式（正常、按下、获取焦点）
2019独角兽企业重金招聘Python工程师标准>>> 现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天 ...
android 自定义控件焦点,Android 自定义Button按钮显示样式（正常、按下、获取焦点）...
现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...
html消除按钮边框,在Chrome中从css自定义样式按钮中删除蓝色边框
在Chrome中从css自定义样式按钮中删除蓝色边框我正在做一个网页,我想要定制样式标签.因此,对于CSS,我说:border: none..现在它在Safari中运行得很好,但是在Chrome中, ...
Winform中使用代码编写Button按钮的点击事件
场景一般在进行Winform窗体开发时都会拖拽一个Button,然后双击进入Button按钮的点击事件中,进行点击事件的编写. 如果窗体上事先没有Button按钮,是在代码中生成的Button按钮 ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...

纯CSS自定义button按钮的点击特效

纯css自定义button按钮的点击特效，实现背景变化

效果图如下：

代码如下：

纯CSS自定义button按钮的点击特效相关推荐

最新文章

热门文章