Кнопка размытого градиента с анимацией при наведении | Blurred Gradient Button Hover Animation CSS

Всем привет! В этом видео вы узнаете, как создать кнопку с красивым эффектом при наведении мышки, используя только HTML и CSS.

СКАЧАТЬ

Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете загрузить исходный код, нажав кнопку «СКАЧАТЬ». Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, оставьте комментарий ниже.

HTML КОД:


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blurred Gradient Button</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 КОД:


*,
*:before,
*:after{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    background-color: #fcfcfc;
}
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: "AWESOME";
    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);
    }
}