CSS按钮动画(二)-CSDN博客

本文链接：https://blog.csdn.net/zjpjay/article/details/112315042

在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。

例如像下面这种按钮的动画效果该怎么实现呢？

简单分析一下，无非就是鼠标🖱移入和移出的时候，改变“遮罩”的高度，“遮罩”的起始位置在按钮的顶部

废话就不多说，咱们直接上代码，干就完了！！！

html代码

<body>
		<div class="abc">
			<div>
				<button class="btn btn-1 btn-1b">hello world</button>
			</div>
		</div>
</body>

css样式代码

body {
				margin: 0;
				padding: 0;
				background: #0e83cd;
			}
			.abc {
				margin-top: 6.25rem;
				/* background-color:red; */
				width: 180px;
				margin-left: 50px;
				
			}
			.btn {
			    border: none;
			    font-family: inherit;
			    font-size: inherit;
			    color: inherit;
			    background: 0 0;
			    cursor: pointer;
			    padding: 25px 80px;
			    display: inline-block;
			    margin: 25px 80px;
			    text-transform: uppercase;
			    letter-spacing: 1px;
			    font-weight: 700;
			    outline: none;
			    position: relative;
			    transition: all .3s;
	
			}
			.btn:after {
			    content: '';
			    position: absolute;
			    z-index: -1;
			    transition: all .3s;
			}

.btn-1 {
			    border: 3px solid #fff;
			    color: #fff;
			}
			.btn-1:hover {
			    color: #0e83cd;
				/* transform: scaleX(1.5); */
				 /* background: red; */
			}
			.btn-1b:after {
			    width: 100%;
			    height: 0;
			    top: 0;
			    left: 0;
			    background: #fff;
			}
			.btn-1b:hover:after {
			    height: 100%;
			}

是不是非常的简单，毫无技术难度，非常人性化，哈哈😁，还等什么，赶紧动手试一下吧！！！

CSS按钮动画(一)

CSS按钮动画(三)