پیشنمایش زنده
کد HTML
<button class="btn">
<svg class="icon" width="30" height="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg>
</button>
کد CSS
.btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: none;
background-color: transparent;
position: relative;
}
.btn:hover > .icon {
transform: scale(1.2);
cursor: pointer;
transition: .2s linear;
}
.btn:focus > .icon {
fill: #fd1853;
animation: grosseur .2s linear;
}
@keyframes grosseur {
0% {
width: 50px;
height: 50px;
fill: #fd1853;
}
100% {
width: 30px;
height: 30px;
fill: #fd1853;
}
}