پیشنمایش زنده
کد HTML
<div class="keyboard">
<label class="key key-hoverable">
<input type="checkbox" class="key-checkbox" />
<div class="key-top">
<svg class="key-icon" viewBox="0 0 24 24">
<path
class="wifi-wave"
d="M12 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
></path>
<path
class="wifi-wave"
d="M12 14c-3.3 0-6 2.7-6 6h2c0-2.2 1.8-4 4-4s4 1.8 4 4h2c0-3.3-2.7-6-6-6z"
></path>
<path
class="wifi-wave"
d="M12 10c-5.5 0-10 4.5-10 10h2c0-4.4 3.6-8 8-8s8 3.6 8 8h2c0-5.5-4.5-10-10-10z"
></path>
</svg>
<span class="status-dot wifi-dot"></span>
</div>
<div class="key-tooltip wifi-tooltip">WiFi</div>
</label>
<label class="key key-hoverable">
<input type="checkbox" class="key-checkbox" />
<div class="key-top">
<svg class="key-icon" viewBox="0 0 24 24">
<path class="network-bar" d="M4 16v4h4v-4H4z"></path>
<path class="network-bar" d="M10 12v8h4v-8h-4z"></path>
<path class="network-bar" d="M16 8v12h4V8h-4z"></path>
</svg>
<span class="status-dot network-dot"></span>
</div>
<div class="key-tooltip network-tooltip">Network</div>
</label>
</div>
کد CSS
.keyboard {
display: flex;
gap: 15px;
background: #e0e0e0;
padding: 20px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.key {
position: relative;
width: 60px;
height: 60px;
perspective: 200px;
cursor: pointer;
}
.key-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.key-top {
width: 100%;
height: 100%;
background: #f5f5f5;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
box-shadow:
0 4px 0 #bdbdbd,
0 6px 10px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
transform-style: preserve-3d;
transform: translateZ(0);
position: relative;
}
.key-hoverable:hover .key-top {
transform: translateY(-2px) translateZ(10px);
box-shadow:
0 6px 0 #bdbdbd,
0 8px 15px rgba(0, 0, 0, 0.15);
}
.key-checkbox:checked + .key-top {
transform: translateY(4px) translateZ(0);
box-shadow:
0 1px 0 #bdbdbd,
0 3px 5px rgba(0, 0, 0, 0.1);
}
.key-icon {
width: 24px;
height: 24px;
}
.status-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.hotspot-dot {
background: #ff7043;
}
.wifi-dot {
background: #42a5f5;
}
.network-dot {
background: #66bb6a;
}
.key-checkbox:checked + .key-top .status-dot {
opacity: 1;
}
.icon-circle {
fill: #555;
transition: fill 0.3s ease;
}
.icon-ring {
fill: none;
stroke: #555;
stroke-width: 2;
transition: stroke 0.3s ease;
}
.wifi-wave {
fill: none;
stroke: #555;
stroke-width: 2;
stroke-linecap: round;
transition: stroke 0.3s ease;
}
.network-bar {
fill: #555;
transition: fill 0.3s ease;
}
.key-hoverable:hover .wifi-wave {
stroke: #42a5f5;
}
.key-hoverable:hover .network-bar {
fill: #66bb6a;
}
.key-checkbox:checked + .key-top .wifi-wave {
stroke: #42a5f5;
}
.key-checkbox:checked + .key-top .network-bar {
fill: #66bb6a;
}
.key-tooltip {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.wifi-tooltip {
background: #42a5f5;
color: white;
}
.network-tooltip {
background: #66bb6a;
color: white;
}
.key-hoverable:hover .key-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}