This topic today is show you how to make HTML CSS Border Animation like below screen shot below, check it out for know how to do it.
Welcome to Webzone, tech tips, i am Zidane.
Let's go
Full source code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b {
font-weight: bold;
color: orange;
}
a.border-animation:hover{
background: radial-gradient(white, #7857d0, #3f5efb);
color: white;
cursor: pointer;
}
a.border-animation {
width: 120px;
position: relative;
margin-top: 50px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
color: yellow;
background-color: black;
font-size: 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
overflow: hidden;
}
a.border-animation span:nth-child(1) {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, red, green);
animation: animate1 2s linear infinite;
}
@keyframes animate1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
a.border-animation span:nth-child(2) {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 3px;
background: linear-gradient(to bottom, white, blue);
animation: animate2 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate2 {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
a.border-animation span:nth-child(3) {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, pink, grey);
animation: animate3 2s linear infinite;
}
@keyframes animate3 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
a.border-animation span:nth-child(4) {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background: linear-gradient(to top, rgb(47, 230, 117), orange);
animation: animate4 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate4 {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
</style>
</head>
<body style="background-color: grey; margin: 20%;">
<div style="font-size: 40px; color: white">
Learn Tech Tips Blogspot - <span class="b">Z</span>idane <br />
<span class="b">B</span>order <span class="b">A</span>nimation
</div>
<div style="display: grid">
<a class="border-animation" href="https://learn-tech-tips.blogspot.com" target="_blank">
<span> </span>
<span> </span>
<span> </span>
<span> </span>
Search
</a>
</div>
</body>
</html>
Thanks
for reading.
Any feedback and questions about How to make HTML CSS Border Animation.
Leave your comment on below post, we can discuss about it.
✋✋✋✋✋✋ Webzone, tech Tips - I am Zidane, See you next time ✋✋✋✋✋✋
