Renkli Hover-Buton yapımı (HTML, CSS)

Herkese selam dostlar bu gün sizlere RGB Raimbow renkli Hover-Button yapımını göstericem kodlar aşağıdaki gibidir kopyala yapıştır kullanmaya başla :)  Hepsi ve daha fazlası için takipte kalın.

        | _-_=-=-=-=-=-=-=-=-=-=-=-=-Göresl-=-=-=-=-=-=-=-=-=-=-=-= _-_|

  

      | _-_=-=-=-=-=-=-=-=-=-=-=-=-Code-=-=-=-=-=-=-=-=-=-=-=-= _-_|

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        body {

            margin: 15px 14x;

        }

        .renkli-buton {

            width: 200px;

            height: 50px;

            border: none;

            outline: none;

            color: #fff;

            background: #111;

            cursor: pointer;

            position: relative;

            z-index: 0;

            border-radius: 10px;

        }

        .renkli-buton:before {

            content: '';

            background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);

            position: absolute;

            top: -2px;

            left: -2px;

            background-size: 400%;

            z-index: -1;

            filter: blur(5px);

            width: calc(100% + 4px);

            height: calc(100% + 4px);

            animation: glowing 20s linear infinite;

            opacity: 0;

            transition: opacity .3s ease-in-out;

            border-radius: 10px;

        }

        .renkli-buton:active {

            color: #000

        }

        .renkli-buton:active:after {

            background: transparent;

        }

        .renkli-buton:hover:before {

            opacity: 1;

        }

        .renkli-buton:after {

            z-index: -1;

            content: '';

            position: absolute;

            width: 100%;

            height: 100%;

            background: #111;

            left: 0;

            top: 0;

            border-radius: 10px;

        }

        @keyframes glowing {

            0% {

                background-position: 0 0;

            }

            50% {

                background-position: 400% 0;

            }

            100% {

                background-position: 0 0;

            }

        }

    </style>

</head>

<body>

    <button class="renkli-buton">Renkli Buton</button>

</body>

</html>