Hello Viewer, Here you’ll Find Code Gradient Button Blurred CSS  . Earlier I have shared many blogs on Gradient Button CSS. and now I’m going to create a Gradient Button Blurred CSS.


Gradient Button Blurred CSS


HTML CODE : 


<!DOCTYPE html>

<html lang="en">

<head>

<title>gradient button Blurred CSS  </title>

<!--Google Font-->

<link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">

<!--Stylesheet-->

<link rel="stylesheet" href="style.css">

</head>

<body>

<button></button>

</body>

</html>


CSS CODE : 


*,

*:before,

*:after{

box-sizing: border-box;

padding: 0;

margin: 0;

}

body{

background-color:#000;

}

button{

height: 100px;

width: 320px;

position: absolute;

margin: auto;

left: 0;

right: 0;

top: 0;

bottom: 0;

border-radius: 10px;

outline: none;

box-shadow: 20px 20px 30px rgba(0,0,0,0.1);

background-color: transparent;

border: none;

overflow: hidden;

}

button:before{

content: "CODEHUBDEEP";

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

font-family: 'Poppins',sans-serif;

font-size: 25px;

letter-spacing: 6px;

font-weight: 700;

padding: 32px 0;

color: #fcfcfc;

background-color: rgba(255,255,255,0.06);

backdrop-filter: blur(25px);

cursor: pointer;

}

button:after{

content: "";

height: 500px;

width: 500px;

position: absolute;

left: -90px;

top: -200px;

z-index: -1;

background-image: conic-gradient(

#ff2e4e,

#d960ff,

#9264ff,

#00b3f9,

#06cd69,

#ffcd00,

#ff5c22,

#ff2e4e

);

}

button:hover:after{

animation: spin 3s linear infinite;

}

@keyframes spin{

100%{

transform: rotate(360deg);

}

}