پیشنمایش زنده
کد HTML
<button class="btn">
<svg
id="facebook"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="#1877F2"
height="40"
width="40"
>
<path
d="M22.675 0h-21.35C.595 0 0 .595 0 1.325v21.351C0 23.405.595 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.411c0-3.1 1.893-4.785 4.658-4.785 1.325 0 2.462.099 2.795.143v3.24h-1.918c-1.505 0-1.796.717-1.796 1.767v2.318h3.588l-.467 3.622h-3.121V24h6.116c.73 0 1.324-.595 1.324-1.324V1.325C24 .595 23.405 0 22.675 0z"
></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;
}