پیشنمایش زنده
کد HTML
<label class="scene">
<input type="checkbox" class="share-toggle" />
<span class="share-btn">
<svg
class="icon-share"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 16 16"
>
<path
d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"
></path>
</svg>
<svg
class="icon-close"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
>
<path
d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"
></path>
</svg>
</span>
<div class="orbit-ring">
<div class="social-node n1" data-label="More">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 16 16"
>
<path
d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5"
></path>
</svg>
</div>
<div class="social-node n2" data-label="Facebook">
<svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 16 16"
>
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"
></path>
</svg>
</div>
<div class="social-node n3" data-label="WhatsApp">
<svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 16 16"
>
<path
d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"
></path>
</svg>
</div>
<div class="social-node n4" data-label="Discord">
<svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 16 16"
>
<path
d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
></path>
</svg>
</div>
<div class="social-node n5" data-label="Reddit">
<svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 16 16"
>
<path
d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z"
></path>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165"
></path>
</svg>
</div>
<div class="social-node n6" data-label="Instagram">
<svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 16 16"
>
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm.003 1.44c2.136 0 2.389.007 3.232.046.78.036 1.203.166 1.485.276.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.276 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.036.78-.166 1.203-.276 1.485-.145.373-.319.64-.599.92s-.546.453-.92.598c-.28.11-.704.24-1.485.276-.843.039-1.096.047-3.231.047s-2.39-.008-3.232-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.843-.038 1.096-.046 3.232-.046zm0 2.452a4.108 4.108 0 1 0 0 8.216 4.108 4.108 0 0 0 0-8.216zm0 6.775a2.667 2.667 0 1 1 0-5.334 2.667 2.667 0 0 1 0 5.334zm5.23-6.937a.96.96 0 1 1-1.92 0 .96.96 0 0 1 1.92 0z"
></path>
</svg>
</div>
<div class="social-node n7" data-label="Snapchat">
<svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 24 24"
>
<path
d="M12.166 2c1.411 0 4.926.418 5.782 4.31.204.948.156 2.075.117 2.998l-.007.166c-.003.06-.005.12-.007.179.175-.07.38-.145.617-.145.368 0 .779.193.896.626.09.338-.028.696-.35.985a3.4 3.4 0 0 1-.407.299c-.276.178-.572.37-.676.7-.057.183-.034.354.074.548l.012.02c.59 1.018 1.698 1.666 2.856 1.666.175 0 .351-.015.522-.044l.036-.006c.09-.014.193-.028.313-.028.507 0 1.002.295 1.002.772 0 .672-.975 1.006-1.73 1.215-.201.056-.393.105-.531.157-.454.17-.543.406-.639.661-.06.163-.122.33-.288.496a1.07 1.07 0 0 1-.706.246 2.1 2.1 0 0 1-.439-.054 3.8 3.8 0 0 0-.77-.083c-.233 0-.455.027-.659.08-.491.13-1.031.44-1.647.781-.899.497-1.92 1.062-3.203 1.062-.097 0-.196-.003-.296-.01l-.199-.01c-.1.007-.2.01-.296.01-1.282 0-2.303-.565-3.202-1.062-.617-.34-1.157-.65-1.647-.78a3.4 3.4 0 0 0-.66-.08 3.8 3.8 0 0 0-.77.082 2.1 2.1 0 0 1-.44.054 1.07 1.07 0 0 1-.705-.246c-.166-.167-.228-.333-.288-.497-.096-.254-.185-.49-.64-.66-.137-.051-.329-.1-.53-.156-.755-.21-1.73-.544-1.73-1.215 0-.477.495-.772 1.002-.772.12 0 .223.014.313.028l.036.006c.17.03.347.044.522.044 1.158 0 2.265-.648 2.855-1.667l.013-.019c.108-.194.131-.365.074-.548-.104-.33-.4-.522-.676-.7a3.4 3.4 0 0 1-.407-.299c-.322-.29-.44-.647-.35-.985.117-.433.528-.626.896-.626.237 0 .442.075.617.145l-.007-.179c-.04-.923-.087-2.05.117-2.998C7.24 2.418 10.755 2 12.166 2Z"
></path>
</svg>
</div>
<div class="social-node n8" data-label="Pinterest">
<svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 16 16"
>
<path
d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0"
></path>
</svg>
</div>
</div>
</label>
کد CSS
@import url("s://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");
.scene {
position: relative;
width: 240px;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
font-family: "DM Mono", monospace;
cursor: pointer;
}
.share-toggle {
display: none;
}
.share-btn {
position: relative;
width: 52px;
height: 52px;
border-radius: 16px;
background: #1a1a1f;
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
z-index: 10;
}
.share-btn svg {
fill: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.share-toggle:checked ~ .share-btn {
background: #22222a;
border-color: rgba(120, 90, 255, 0.4);
box-shadow:
0 0 0 4px rgba(120, 90, 255, 0.1),
0 8px 32px rgba(0, 0, 0, 0.4);
transform: scale(1.05);
}
.share-toggle:checked ~ .share-btn svg {
fill: rgba(255, 255, 255, 0.9);
filter: drop-shadow(0 0 6px rgba(120, 90, 255, 0.6));
}
.share-btn::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 17px;
border: 1px solid rgba(120, 90, 255, 0);
transition: all 0.4s ease;
pointer-events: none;
}
.share-toggle:checked ~ .share-btn::before {
border-color: rgba(120, 90, 255, 0.3);
inset: -6px;
border-radius: 22px;
}
.icon-close {
display: none;
}
.share-toggle:checked ~ .share-btn .icon-share {
display: none;
}
.share-toggle:checked ~ .share-btn .icon-close {
display: block;
fill: rgba(255, 255, 255, 0.6);
}
.orbit-ring {
position: absolute;
inset: 0;
pointer-events: none;
}
.social-node {
position: absolute;
top: 50%;
left: 50%;
width: 42px;
height: 42px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translate(-50%, -50%) scale(0.3);
transition:
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.2s ease,
box-shadow 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.share-toggle:checked ~ .orbit-ring {
pointer-events: all;
}
.share-toggle:checked ~ .orbit-ring .social-node {
opacity: 1;
}
.n1 {
--tx: 0px;
--ty: -88px;
}
.n2 {
--tx: 62px;
--ty: -62px;
}
.n3 {
--tx: 88px;
--ty: 0px;
}
.n4 {
--tx: 62px;
--ty: 62px;
}
.n5 {
--tx: 0px;
--ty: 88px;
}
.n6 {
--tx: -62px;
--ty: 62px;
}
.n7 {
--tx: -88px;
--ty: 0px;
}
.n8 {
--tx: -62px;
--ty: -62px;
}
.share-toggle:checked ~ .orbit-ring .n1 {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
transition-delay: 0ms;
}
.share-toggle:checked ~ .orbit-ring .n2 {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
transition-delay: 30ms;
}
.share-toggle:checked ~ .orbit-ring .n3 {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
transition-delay: 55ms;
}
.share-toggle:checked ~ .orbit-ring .n4 {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
transition-delay: 80ms;
}
.share-toggle:checked ~ .orbit-ring .n5 {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
transition-delay: 100ms;
}
.share-toggle:checked ~ .orbit-ring .n6 {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
transition-delay: 80ms;
}
.share-toggle:checked ~ .orbit-ring .n7 {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
transition-delay: 55ms;
}
.share-toggle:checked ~ .orbit-ring .n8 {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
transition-delay: 30ms;
}
.n1 {
background: rgba(120, 90, 255, 0.12);
}
.n1 svg {
fill: #a07aff;
}
.n1:hover {
background: #7c5cbf;
box-shadow: 0 4px 20px rgba(120, 90, 255, 0.45);
}
.n1:hover svg {
fill: #fff;
}
.n2 {
background: rgba(4, 98, 223, 0.12);
}
.n2 svg {
fill: #4f8ef7;
}
.n2:hover {
background: #0462df;
box-shadow: 0 4px 20px rgba(4, 98, 223, 0.4);
}
.n2:hover svg {
fill: #fff;
}
.n3 {
background: rgba(37, 211, 102, 0.12);
}
.n3 svg {
fill: #25d366;
}
.n3:hover {
background: #25d366;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}
.n3:hover svg {
fill: #fff;
}
.n4 {
background: rgba(88, 101, 242, 0.12);
}
.n4 svg {
fill: #8c9eff;
}
.n4:hover {
background: #5865f2;
box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
}
.n4:hover svg {
fill: #fff;
}
.n5 {
background: rgba(255, 69, 0, 0.12);
}
.n5 svg {
fill: #ff6534;
}
.n5:hover {
background: #ff4500;
box-shadow: 0 4px 20px rgba(255, 69, 0, 0.4);
}
.n5:hover svg {
fill: #fff;
}
.n6 {
background: rgba(225, 48, 108, 0.12);
}
.n6 svg {
fill: #e1306c;
}
.n6:hover {
background: linear-gradient(
135deg,
#f09433,
#e6683c,
#dc2743,
#cc2366,
#bc1888
);
box-shadow: 0 4px 20px rgba(225, 48, 108, 0.4);
}
.n6:hover svg {
fill: #fff;
}
.n7 {
background: rgba(255, 252, 0, 0.08);
}
.n7 svg {
fill: #fffc00;
}
.n7:hover {
background: #fffc00;
box-shadow: 0 4px 20px rgba(255, 252, 0, 0.35);
}
.n7:hover svg {
fill: #000;
}
.n8 {
background: rgba(189, 8, 28, 0.12);
}
.n8 svg {
fill: #e60023;
}
.n8:hover {
background: #e60023;
box-shadow: 0 4px 20px rgba(189, 8, 28, 0.4);
}
.n8:hover svg {
fill: #fff;
}
.social-node::after {
content: attr(data-label);
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.28);
white-space: nowrap;
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.social-node:hover::after {
opacity: 1;
color: rgba(255, 255, 255, 0.65);
}