DM Creative - Cool HTML & CSS Tricks "Gradient Glowing Button Using HTML and CSS"

DEMO :

HTML CODE :
<html>
<head>
<title>Glowing Gradient Button</title>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="animate.css">

<script src="js/bootstrap.min.js"></script>
</head>

<body>

<div class="row">
<div class="container">
<a href="#">Click Me ! </a>
</div>

</div>

</body>

</html>

CSS CODE :

body{
	margin: 0;
	padding:0;
	background-color: #1F2025;
}
a{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:270px;
	height:55px;
	
	border-radius: 35px;
	text-align: center;
	color:#fff;
	font-size: 33px;
	font-family:nexa;
	box-sizing:border-box;
	background : linear-gradient(90deg,#45aaf2,#4b7bec,#f9ca24,#badc58,#45aaf2);
	background-size: 400%;

	z-index: 1;
}
a:hover{
	text-decoration: none;
	color:#fff;
	animation: animate 7s linear infinite;	

}
@keyframes animate{

	0%{
		background-position:0%;
	}
	100%{
		background-position:400%;
	}
}
a:before{
	content:'';
	position: absolute;
	top:-5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	background : linear-gradient(90deg,#45aaf2,#4b7bec,#FC427B,#ff793f,#8854d0,#45aaf2);
	z-index: -1;
	background-size: 400%;
	opacity: 0;
	transition: 0.5s;
}
a:hover:before{
	filter: blur(20px);
	opacity: 1;
	animation: animate 7s linear infinite;	
	border-radius: 30px;

}