پیشنمایش زنده
کد HTML
<div class="card">
<div class="social-icons">
<p>@Youtube</p>
<a>Follow</a>
<svg
fill="#000000"
xml:space="preserve"
viewBox="0 0 461.001 461.001"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
id="Layer_1"
version="1.1"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<g>
<path
d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
style="fill:#F61C0D;"
></path>
</g>
</g>
</svg>
</div>
<div class="social-icons">
<p>@Tik Tok</p>
<a>Follow</a>
<svg
xmlns="http://www.w3.org/2000/svg"
id="icons"
viewBox="0 0 512 512"
fill="#000000"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<path
d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"
></path>
</g>
</svg>
</div>
<div class="social-icons">
<p>@Instagram</p>
<a>Follow</a>
<svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<g>
<path
fill-rule="nonzero"
fill="#FF1493"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
></path>
</g>
</g>
</svg>
</div>
</div>
کد CSS
.card {
display: flex;
width: 220px;
height: 50px;
/* gap: 1.2rem; */
background-color: whitesmoke;
border-radius: 115px;
padding-inline: 15px;
position: relative;
justify-content: space-around;
/* align-items: center; */
}
.social-icons {
cursor: pointer;
display: flex;
transition: all 0.5s;
align-items: center;
justify-content: center;
position: relative;
color: white;
font-weight: bold;
font-size: small;
}
.social-icons > p {
--var: -0%;
position: absolute;
top: var(--var);
transition: all 0.7s;
background-color: dodgerblue;
border-radius: 7px;
opacity: 0;
padding-inline: 7px;
padding-block: 3px;
width: max-content;
}
.social-icons > p::after {
content: "";
position: absolute;
border-top: 10px solid dodgerblue;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
top: 100%;
left: 50%;
transform: translate(-50%);
}
.social-icons > a {
--var: -0%;
position: absolute;
bottom: var(--var);
width: max-content;
transition: all 0.7s;
opacity: 0;
padding-inline: 7px;
padding-block: 3px;
background-color: crimson;
border-radius: 7px;
}
.social-icons > a::after {
content: "";
position: absolute;
border-bottom: 10px solid crimson;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
bottom: 100%;
left: 50%;
transform: translate(-50%);
}
.social-icons:hover > a,
.social-icons:hover > p {
--var: -65%;
opacity: 1;
}
.social-icons:hover {
z-index: 15;
}
.card:hover > .social-icons:not(:hover) {
filter: blur(3px);
transform: scale(0.8);
}
.card svg {
height: 30px;
}