پیشنمایش زنده
کد HTML
<div class="main">
<div class="up">
<button class="card card1">
<svg
class="instagram"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0,0,256,256"
width="40px"
height="40px"
fill-rule="nonzero"
>
<g
fill-rule="nonzero"
stroke="none"
stroke-width="1"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<g transform="scale(8.53333,8.53333)">
<path
d="M9.99805,3c-3.859,0 -6.99805,3.141 -6.99805,7.00195v9.99609c0,3.859 3.141,7 6.99805,7h9.99609c3.859,0 7,-3.141 7,-7v-9.99609c0,-3.859 -3.141,-7.00195 -7,-7.00195zM24,7h1c0.552,0 1,0.448 1,1v1c0,0.552 -0.448,1 -1,1h-1c-0.552,0 -1,-0.448 -1,-1v-1c0,-0.552 0.448,-1 1,-1zM15,9c3.309,0 6,2.691 6,6c0,3.309 -2.691,6 -6,6c-3.309,0 -6,-2.691 -6,-6c0,-3.309 2.691,-6 6,-6zM15,11c-2.20914,0 -4,1.79086 -4,4c0,2.20914 1.79086,4 4,4c2.20914,0 4,-1.79086 4,-4c0,-2.20914 -1.79086,-4 -4,-4z"
></path>
</g>
</g>
</svg>
</button>
<button class="card card2">
<svg
class="twitter"
height="40px"
width="40px"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.39.106-.803.163-1.227.163-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"
></path>
</svg>
</button>
</div>
<div class="down">
<button class="card card3">
<svg
class="github"
height="38px"
width="38px"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
></path>
</svg>
</button>
<button class="card card4">
<svg
width="40"
height="40"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="whatsapp"
>
<path
d="M19.001 4.908A9.817 9.817 0 0 0 11.992 2C6.534 2 2.085 6.448 2.08 11.908c0 1.748.458 3.45 1.321 4.956L2 22l5.255-1.377a9.916 9.916 0 0 0 4.737 1.206h.005c5.46 0 9.908-4.448 9.913-9.913A9.872 9.872 0 0 0 19 4.908h.001ZM11.992 20.15A8.216 8.216 0 0 1 7.797 19l-.3-.18-3.117.818.833-3.041-.196-.314a8.2 8.2 0 0 1-1.258-4.381c0-4.533 3.696-8.23 8.239-8.23a8.2 8.2 0 0 1 5.825 2.413 8.196 8.196 0 0 1 2.41 5.825c-.006 4.55-3.702 8.24-8.24 8.24Zm4.52-6.167c-.247-.124-1.463-.723-1.692-.808-.228-.08-.394-.123-.556.124-.166.246-.641.808-.784.969-.143.166-.29.185-.537.062-.247-.125-1.045-.385-1.99-1.23-.738-.657-1.232-1.47-1.38-1.716-.142-.247-.013-.38.11-.504.11-.11.247-.29.37-.432.126-.143.167-.248.248-.413.082-.167.043-.31-.018-.433-.063-.124-.557-1.345-.765-1.838-.2-.486-.404-.419-.557-.425-.142-.009-.309-.009-.475-.009a.911.911 0 0 0-.661.31c-.228.247-.864.845-.864 2.067 0 1.22.888 2.395 1.013 2.56.122.167 1.742 2.666 4.229 3.74.587.257 1.05.408 1.41.523.595.19 1.13.162 1.558.1.475-.072 1.464-.6 1.673-1.178.205-.58.205-1.075.142-1.18-.061-.104-.227-.165-.475-.29Z"
></path>
</svg>
</button>
</div>
</div>
کد CSS
.main {
display: flex;
flex-direction: column;
gap: 0.75em;
}
.up,
.down {
display: flex;
flex-direction: row;
gap: 0.75em;
}
.card {
width: 90px;
height: 90px;
background: white;
border-radius: 5px;
border: 3px solid #2d2d2d;
box-shadow: 6px 6px 0px #2d2d2d;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
display: flex;
align-items: center;
justify-content: center;
}
.card1 {
border-radius: 90px 5px 5px 5px;
padding-top: 12px;
padding-left: 12px;
}
.card2 {
border-radius: 5px 90px 5px 5px;
padding-top: 12px;
padding-right: 12px;
}
.card3 {
border-radius: 5px 5px 5px 90px;
padding-bottom: 10px;
padding-left: 12px;
}
.card4 {
border-radius: 5px 5px 90px 5px;
padding-bottom: 12px;
padding-right: 12px;
}
.instagram,
.twitter,
.github,
.discord {
transition: fill 0.2s ease-in-out;
}
.instagram {
fill: #e1306c;
}
.twitter {
fill: #1da1f2;
}
.github {
fill: #333;
}
.whatsapp {
fill: #00a849;
}
.card:hover {
cursor: pointer;
transform: translate(-6px, -6px);
box-shadow: 12px 12px 0px #2d2d2d;
}
.card1:hover {
background-color: #fd1d1d;
}
.card2:hover {
background-color: #24a0ed;
}
.card3:hover {
background-color: #f7b733;
}
.card4:hover {
background-color: #4cd137;
}
.card:hover svg {
fill: white;
}