div+css实现水纹水流波动按钮悬浮动画效果代码-html代码-BFW代码库

div+css实现水纹水流波动按钮悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现水纹水流波动按钮悬浮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    *
	{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

body
	{
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		background:#0c0c0c;

	}

a
	{
		position: relative;
		padding: 20px 50px;
		display: block;
		text-decoration: none;
		text-transform: uppercase;
		width: 200px;
		overflow: hidden;
		border-radius: 40px;
	}

a span
	{
		position: relative;
		//padding: 20px;
		color: #fff;
		font-size: 20px;
		font-family: Arial;
		letter-spacing: 8px;
		z-index: 1;
		text-align: center;
	}

a .liquid
	{
		position: absolute;
		top: -80px;
		left: 0;
		width: 200px;
		height: 200px;
		background: #4973ff;
		box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
		transition: .5s;
	}

a .liq.........完整代码请登录后点击上方下载按钮下载查看