پیشنمایش زنده
کد HTML
<button class="btn">
<svg
width="40px"
height="40px"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="#0092E4"
>
<path
d="M18.71,19.5C17.88,20.74,17,22,15.66,22s-1.77-.79-3.29-.79-2,.77-3.27.82S6.8,20.68,6,19.47c-1.71-2.47-3-7-1.26-10.08A4.88,4.88,0,0,1,8.82,6.88c1.28,0,2.5.87,3.29.87s2.26-1.07,3.81-.91a4.64,4.64,0,0,1,3.64,2,4.56,4.56,0,0,0-2.15,3.81,4.41,4.41,0,0,0,2.68,4,11.05,11.05,0,0,1-1.38,2.83M13,3.5A4.55,4.55,0,0,1,15.94,2a4.38,4.38,0,0,1-1,3.19,3.65,3.65,0,0,1-3,1.42A4.27,4.27,0,0,1,13,3.5Z"
></path>
</svg>
</button>
کد CSS
.btn {
display: grid;
place-items: center;
background: #e3edf7;
padding: 1.4em;
border-radius: 10px;
box-shadow:
6px 6px 10px -1px rgba(0, 0, 0, 0.15),
-6px -6px 10px -1px rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0);
cursor: pointer;
transition: transform 0.5s;
}
.btn:hover {
box-shadow:
inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
-0.5px -0.5px 0px rgba(255, 255, 255, 1),
0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
0px 12px 10px -10px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
transform: translateY(0.5em);
}
.btn svg {
transition: transform 0.5s;
}
.btn:hover svg {
transform: scale(0.9);
fill: #333333;
}