پیشنمایش زنده
کد HTML
<button class="glass-btn" id="glassBtn">
<svg
class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<span class="btn-text">Copy</span>
</button>
کد CSS
.glass-btn {
padding: 12px 24px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
color: #1f2937;
font-size: 16px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.glass-btn:hover {
transform: scale(1.05);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.glass-btn:active {
transform: scale(0.95);
}
.icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.glass-btn:hover .icon {
transform: rotate(12deg);
}
.copied-text {
color: #059669;
}
.copied-icon {
stroke: #059669;
}