js+css实现液态按钮悬浮交互动画效果代码

代码语言:html

所属分类:悬停

代码描述:js+css实现液态按钮悬浮交互动画效果代码

代码标签: js css 液态 按钮 悬浮 交互 动画

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Droid+Sans:700'>
<style>
    body {
	display: flex;
	height: 100vh;

	align-items: center;
	justify-content: center;
}

.btn-liquid {
	display: inline-block;
	position: relative;
	width: 240px;
	height: 60px;

	border-radius: 27px;

	color: #fff;
	font: 700 14px/60px "Droid Sans", sans-serif;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.btn-liquid .inner {
	position: relative;

	z-index: 2;
}

.btn-liquid canvas {
	position: absolute;
	top: -50px;
	right: -50px;
	bottom: -50px;
	left: -50px;

	z-index: 1;
}
</style>

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

网友评论0