پیشنمایش زنده
کد HTML
<div class="reaction-wrapper">
<div class="reaction-header">
<div class="reaction-title">Team Reactions</div>
<div class="reaction-subtitle">Hover to interact</div>
</div>
<div class="reaction-bar">
<div class="reaction-item">
<span class="tooltip">AMY</span>
<button class="reaction-btn">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#b6e3f4"></circle>
<path
d="M10 20 C10 10 54 10 54 20 L54 35 L10 35 Z"
fill="#333"
></path>
<circle cx="22" cy="38" r="4" fill="#333"></circle>
<circle cx="42" cy="38" r="4" fill="#333"></circle>
<path
d="M26 50 Q32 56 38 50"
stroke="#333"
stroke-width="3"
fill="none"
stroke-linecap="round"
></path>
</svg>
</button>
</div>
<div class="reaction-item">
<span class="tooltip">JAKE</span>
<button class="reaction-btn">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#c0aede"></circle>
<path d="M12 16 Q32 4 52 16 L52 32 L12 32 Z" fill="#5c4b75"></path>
<rect x="18" y="36" width="8" height="4" rx="2" fill="#333"></rect>
<rect x="38" y="36" width="8" height="4" rx="2" fill="#333"></rect>
<path
d="M28 48 H36"
stroke="#333"
stroke-width="3"
stroke-linecap="round"
></path>
</svg>
</button>
</div>
<div class="reaction-item">
<span class="tooltip">LIAM</span>
<button class="reaction-btn">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#ffd5dc"></circle>
<path
d="M16 12 C16 12 20 28 32 28 C44 28 48 12 48 12"
fill="#e0576a"
></path>
<circle cx="24" cy="36" r="3" fill="#333"></circle>
<circle cx="40" cy="36" r="3" fill="#333"></circle>
<path d="M24 48 Q32 58 40 48" fill="#a11"></path>
</svg>
</button>
</div>
<div class="reaction-item">
<span class="tooltip">ZARA</span>
<button class="reaction-btn">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#ffdfbf"></circle>
<path d="M8 32 L8 16 Q32 0 56 16 L56 32 Z" fill="#e89e46"></path>
<circle cx="22" cy="40" r="4" fill="#333"></circle>
<circle cx="42" cy="40" r="4" fill="#333"></circle>
<ellipse cx="32" cy="52" rx="4" ry="6" fill="#d95e5e"></ellipse>
</svg>
</button>
</div>
<div class="reaction-item">
<span class="tooltip">FINN</span>
<button class="reaction-btn">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#d1d4f9"></circle>
<path
d="M14 14 Q32 40 50 14"
stroke="#333"
stroke-width="3"
fill="none"
></path>
<rect x="20" y="36" width="6" height="6" fill="#333"></rect>
<rect x="38" y="36" width="6" height="6" fill="#333"></rect>
<path
d="M26 50 Q32 45 38 50"
stroke="#333"
stroke-width="2"
fill="none"
></path>
</svg>
</button>
</div>
<div class="reaction-item">
<span class="tooltip">ZOE</span>
<button class="reaction-btn">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="32" fill="#c0aede"></circle>
<path d="M8 24 Q32 6 56 24" fill="#333"></path>
<path
d="M20 34 L28 38"
stroke="#333"
stroke-width="3"
stroke-linecap="round"
></path>
<path
d="M44 34 L36 38"
stroke="#333"
stroke-width="3"
stroke-linecap="round"
></path>
<path
d="M26 52 H38"
stroke="#333"
stroke-width="3"
stroke-linecap="round"
></path>
</svg>
</button>
</div>
</div>
</div>
کد CSS
/* --- Header Text Styles (Replacing h2/p) --- */
.reaction-header {
text-align: center;
}
.reaction-title {
color: #1e293b;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
.reaction-subtitle {
color: #64748b;
font-size: 0.9rem;
margin-top: 0.5rem;
line-height: 1.5;
}
/* --- Main Bar --- */
.reaction-bar {
display: flex;
gap: 8px;
padding: 16px 24px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 60px;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.05),
0 10px 15px -3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(0, 0, 0, 0.02);
backdrop-filter: blur(20px);
}
/* --- Item Wrapper --- */
.reaction-item {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* --- Button Styling --- */
.reaction-btn {
width: 56px;
height: 56px;
padding: 0;
border: 3px solid #ffffff;
border-radius: 50%;
background-color: #f1f5f9;
cursor: pointer;
position: relative;
z-index: 1;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
/* SVG Icon Styling */
.reaction-btn svg {
width: 100%;
height: 100%;
display: block;
}
/* --- Tooltip Styling --- */
.tooltip {
position: absolute;
top: -55px;
background-color: #1e293b;
color: white;
padding: 6px 12px;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(0.9);
transition: all 0.2s ease-out;
white-space: nowrap;
z-index: 0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Tooltip Arrow */
.tooltip::after {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1e293b;
}
/* --- Interaction Effects --- */
/* 1. Zoom the Avatar on Hover */
.reaction-item:hover .reaction-btn {
transform: scale(1.5) translateY(-10px);
z-index: 10;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
border-color: #ffffff;
}
/* 2. Show the Tooltip on Hover */
.reaction-item:hover .tooltip {
opacity: 1;
transform: translateY(0) scale(1);
z-index: 20;
transition-delay: 0.1s;
}
/* 3. Dim Siblings on Container Hover */
.reaction-bar:hover .reaction-btn:not(:hover) {
filter: grayscale(20%) opacity(0.7);
transform: scale(0.95);
}