HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
CSS CODE: (file name : mystyle.css)
body
{
padding: 0px;
margin: 0px;
background: #0c002b;
font-family: sans-sarif;
}
a
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 30px;
font-weight: 400;
padding: 30px 50px;
letter-spacing: 2px;
text-transform: uppercase;
box-shadow: 0px 20px 50px rgba(0,0,0,.5);
text-decoration: none;
color: #ff0d00;
overflow: hidden;
}
a::before
{
content:'';
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 50%;
background: rgba(255,255,255,0.05);
}
a span:nth-child(1)
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 2px;
background: linear-gradient(to right,#0c002b ,#03e3fc);
animation: animate1 2s linear infinite;
}
@keyframes animate1
{
0%
{
transform: translatex(-100px);
}
100%
{
transform: translatex(100px);
}
}
a span:nth-child(2)
{
position: absolute;
top: 0px;
left: 0px;
width: 2px;
height: 100%;
background: linear-gradient(to top,#0c002b ,#03e3fc);
animation: animate2 2s linear infinite;
}
@keyframes animate2
{
0%
{
transform: translatey(100px);
}
100%
{
transform: translatey(-100px);
}
}
a span:nth-child(3)
{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 2px;
background: linear-gradient(to left,#0c002b ,#03e3fc);
animation: animate3 2s linear infinite;
}
@keyframes animate3
{
0%
{
transform: translatex(100px);
}
100%
{
transform: translatex(-100px);
}
}
a span:nth-child(4)
{
position: absolute;
top: 0px;
right: 0px;
width: 2px;
height: 100%;
background: linear-gradient(to bottom,#0c002b ,#03e3fc);
animation: animate4 2s linear infinite;
}
@keyframes animate4
{
0%
{
transform: translatey(-100px);
}
100%
{
transform: translatey(100px);
}
}
Comments
Post a Comment