html, body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f1f1f1;
}

.button {
cursor: pointer;
display: inline-block;
position: relative;
margin: 10px;
padding: 15px 40px;
font-family: “Arial”, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background-color: #0066ff;
border-radius: 50px;
overflow: hidden;
transition: transform 0.3s ease-out;
z-index: 1;
}

.button::before {
content: “”;
position: absolute;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
background-color: #0099ff;
transform: translate(-50%, -50%) rotate(45deg);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-out;
}

.button:hover {
transform: scale(1.05);
}

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

.button span {
position: relative;
z-index: 2;
}