<button class="btn">
   <p class="words">Hover me</p>
 </button>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
   }

   body {
     width: 100%;
     height: 100vh;
     justify-content: center;
     align-items: center;
     display: flex;
     background-color: #1c1524;
   }

   .btn {
     width: 240px;
     font-size: 20px;
     height: 60px;
     border: none;
     outline: none;
     background: black;
     cursor: pointer;
     position: relative;
     border-radius: 10px;
   }

   .words {
     color: white;
     font-size: 1.4em;
     background-image: none;
     font-weight: bold;
   }

   .btn:hover .words {
     background: linear-gradient(124deg,
         #dd00f3 1%,
         #ff2400,
         #e81d1d,
         #e8b71d,
         #e3e81d,
         #1de840,
         #1ddde8,
         #2b1de8,
         #dd00f3,
         #dd00f3,

         #ff2400,
         #e81d1d,
         #e8b71d,
         #e3e81d,
         #1de840,
         #1ddde8,
         #2b1de8,
         #dd00f3,
         #dd00f3);

     -webkit-background-clip: text;
     -webkit-text-stroke: 2px transparent;
     color: #000;

     animation: glowing 20s linear infinite;
     background-size: 200%;

     opacity: 0;
     transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
   }

   .btn:hover .words {
     opacity: 1;
   }

   .btn:before {
     content: "";
     background: linear-gradient(90deg,
         #ff2400,
         #e81d1d,
         #e8b71d,
         #e3e81d,
         #1de840,
         #1ddde8,
         #2b1de8,
         #dd00f3,
         #dd00f3,

         #ff2400,
         #e81d1d,
         #e8b71d,
         #e3e81d,
         #1de840,
         #1ddde8,
         #2b1de8,
         #dd00f3,
         #dd00f3);
     position: absolute;
     top: -2px;
     left: -2px;
     background-size: 200%;
     z-index: -1;
     filter: blur(5px);
     width: calc(100% + 4px);
     height: calc(50% + 4px);
     animation: glowing 20s linear infinite;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     border-top-right-radius: 10px;
     border-top-left-radius: 10px;
   }

   .btn:hover:before {
     opacity: 1;
   }

   .btn:hover.btn:after {
     opacity: 1;
   }

   .btn:after {
     content: "";
     background: linear-gradient(90deg,
         #dd00f3,
         #dd00f3,
         #2b1de8,
         #1ddde8,
         #1de840,
         #e3e81d,
         #e8b71d,
         #e81d1d,
         #ff2400,

         #dd00f3,
         #dd00f3,
         #2b1de8,
         #1ddde8,
         #1de840,
         #e3e81d,
         #e8b71d,
         #e81d1d,
         #ff2400);
     position: absolute;
     top: calc(50% - 2px);
     left: -2px;
     background-size: 200%;
     z-index: -1;
     filter: blur(5px);
     width: calc(100% + 4px);
     height: calc(50% + 4px);
     animation: glowing-reverse 20s linear infinite;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
   }

   @keyframes glowing {
     0% {
       background-position: 0 0;
     }

     100% {
       background-position: 400% 0;
     }
   }

   @keyframes glowing-reverse {
     0% {
       background-position: 400% 0;
     }

     100% {
       background-position: 0 0;
     }
   }

//None