/* HTML */
<a href="#"><button class="button-07">Hover Me!</button></a>

/* CSS */
.button-07 {
 padding: 0.9em 1.9em;
 font-size: 16px;
 border: none;
 background: #6285f8;
 color: white;
 cursor: pointer;
 position: relative;
 z-index: 1;
}

.button-07:hover {
 color: rgb(255, 255, 255);
}

.button-07::before,.button-07::after {
 content: "";
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background: rgba(128, 128, 128, 0.096);
 backdrop-filter: blur(10px);
 z-index: -1;
 transition: all 0.4s;
}

.button-07::after {
 z-index: -2;
 transition: all 0.4s;
}

.button-07:hover::before {
 background: rgb(0, 0, 0, 0.315);
 border-radius: 10px;
}

.button-07:hover::after {
 background: linear-gradient(to right, #cb6ce6, #38b6ff);
 border-radius: 10px;
 transform: scale(1.07, 1.2) rotateX(180deg);
}