好久没有发表文章了，最近在弄个人blog，大家如果觉得文章写的不错可以关注下我的博客 林志伟博客 (狗头保命)

展示

前言

按钮特效使用伪类标签来实现效果before/after, 以下就是一些步骤展示

1.把按钮创建出来，博主常用按钮是div写的

<div>按钮</div>
复制代码

2.对应按钮的基础css样式我们先完成,这里用less展示

div{
	position: relative;
	cursor: pointer;//添加移动到块的手势
	display: flex;//使用flex让文字居中
	align-items: center;
	justify-content: center;
        transition: all .2s;
	background: linear-gradient(left, #ffffff,#333333)//渐变色 从白到黑，这个色值自行使用喜欢的色号
}
复制代码

3.基础部分已经完成 这时候给div添加伪类标签

div{
	//步骤2已经设置了相对定位
	&:before{
		content: '';伪类标签一定要设置 content 不然没有效果
		position: absolute;
		left: -100%;
		top: -100%;
		width: 100%;
		height: 100%；
		background: rgba(255,255,255,.2);
	}
	&:after{
		content: '';伪类标签一定要设置 content 不然没有效果
		position: absolute;
		right: -100%;
		bottom: -100%;
		width: 100%;
		height: 100%；
		background: rgba(255,255,255,.2);
	}
}
复制代码

4.最后一步就是给div做一个hover的效果

div{
	&:hover{
		&:before{
			top: 0;
			left: 0;
		}
		&:after{
			button: 0;
			right: 0;
		}
	}
}
复制代码

以上就是一个按钮简单的特效实现，大家也可以去尝试一下，创作不易，感谢观看