div样式按钮
自己制作了一款按钮,觉得会有用到的机会
代码:
- 锐客网
文章图片
图标按钮
按钮
css文件:
.btn {
font-size: 10px;
font-weight: bolder;
background-color: #a59ba46a;
width: 80px;
border: 1px solid #a59ba4;
border-radius: 6px;
float: left;
color: #0a010c;
-o-user-select: none;
-moz-user-select: none;
/*火狐 firefox*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10+*/
-khtml-user-select: none;
/*早期的浏览器*/
user-select: none;
margin: 5px;
}
.btn tr{
height: 24px;
}.btn img {
width: 16px;
padding-top: 3px;
padding-left: 3px;
height: 16px;
}.btn:hover {
background-color: #a59ba49a;
cursor: pointer;
}.btn:active {
background-color: #a59ba4;
/* box-shadow:5px 10px 15px 2px rgba(0,0,0,0.1);
/*1.水平阴影2.垂直阴影 3.模糊距离，改虚实 4.阴影尺寸*/
*/
}.btn-info {
background-color: #2CB1BA6a;
border: 1px solid #2CB1BA;
}.btn-info:hover {
background-color: #2CB1BA9a;
}.btn-info:active {
background-color: #2CB1BA;
}
效果:
文章图片
说明:
1 按钮提供图片所示两种样式
2 按钮适用于Chrome浏览器
【div样式按钮】希望有喜欢的朋友下载自己体验,欢迎评论,留言
推荐阅读
- docker镜像探索----dive工具
- react-navigation|react-navigation 动态修改 tabBar 样式
- HTML5学习之ul|HTML5学习之ul li列表实战
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- Xcode|Xcode 11.2 开启推送按钮
- 独立思考之对“个性Individual”|独立思考之对“个性Individual” 的思考
- Vue调用IOS原生方法
- 纯CSS实现一个3D按钮
- 地图|高德地图清除指定覆盖物 自定义覆盖物样式（完整dome）
- 数据尖兵软件|数据尖兵软件,详细介绍