<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Luquid Button Animation Effects</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">
<span>Button</span>
<div class="luquid"> </div>
</a>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0c0c0c;
}
a {
position: relative;
padding: 20px 50px;
display: block;
text-decoration: none;
text-transform: uppercase;
width: 200px;
}
a span {
position: relative;
z-index: 1;
color:#fff;
font-size: 20px;
letter-spacing: 8px;
}
a .luquid {
position: absolute;
left:0;
top:0;
width: 200px;
height: 70px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
transition: 0.5s;
overflow: hidden;
}
a:hover {
background: black;
z-index: 3333;
}
a .luquid:before,
a .luquid:after
{
content: '';
position: absolute;
width: 200%;
height: 200%;
top:0;
left: 50%;
transform: translate(-50%,-75%);
}
a .luquid:before {
border-radius: 45%;
background: rgba(20,20,20,1);
animation: animate 5s linear infinite;
}
a .luquid:after {
border-radius: 40%;
background: rgba(20,20,20,0.5);
animation: animate 10s linear infinite;
}
@keyframes animate {
0%{
transform: translate(-50%,-75%) rotate(0deg);
}
100%{
transform: translate(-50%,-75%) rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.