YouTube Video Link: Animated Gradient Button using HTML CSS
Html CSS Code:
<!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>
body {
background: black;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
body .btn,
body .btn2 {
width: 300px;
height: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
color: rgba(255, 255, 255, 0.9);
border-radius: 50px;
background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
background-size: 600%;
-webkit-animation: anime 16s linear infinite;
animation: anime 16s linear infinite;
}
body .btn2 {
position: absolute;
margin-top: -70px;
z-index: -1;
filter: blur(30px);
opacity: 0.8;
}
@-webkit-keyframes anime {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes anime {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="btn">Blink Coders!
<div class="btn2"></div>
</div>
</body>
</html>
Thanks for Visiting Blinks Coders!
Tags:
animated gradient button on hover using html & css, css gradient animation, gradient button, css glowing gradient, css gradient effects, css gradient, css gradient tutorial, animated gradient button html css, button hover effect using css, css button, animated gradient button hover effect, glowing gradient button animation effects on hover using html and css, animated gradienr border, animated buttons using html and css in tamil, css gradient border, css button animation
Post a Comment