پیشنمایش زنده
کد HTML
<button class="btn">Hover me</button>
کد CSS
.btn {
position: relative;
font-size: 17px;
text-transform: uppercase;
text-decoration: none;
padding: 1em 2.5em;
display: inline-block;
border-radius: 50px;
transition: all .3s;
border: none;
font-family: Arial, sans-serif;
font-weight: 600;
color: white;
background-color: #3498db;
cursor: pointer;
}
.btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: scale(0.95);
box-shadow: none;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 50px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
.btn::after {
background-color: #2980b9;
}
.btn:hover::after {
transform: scaleX(1.2) scaleY(1.4);
opacity: 0;
}