پیشنمایش زنده
کد HTML
<button class="share-btn-wrapper">
<div class="share-inner">
<span class="share-text">SHARE</span>
<div class="hover-panel"></div>
<div class="social-icons">
<svg viewBox="0 0 24 24">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
></path>
</svg>
<svg viewBox="0 0 24 24">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
<svg viewBox="0 0 24 24">
<line x1="4" y1="4" x2="20" y2="20"></line>
<line x1="20" y1="4" x2="4" y2="20"></line>
</svg>
<svg viewBox="0 0 24 24">
<path
d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
></path>
</svg>
</div>
</div>
</button>
کد CSS
.share-btn-wrapper {
position: relative;
padding: 3px;
border-radius: 999px;
background: linear-gradient(135deg, #93a1f8, #0f1f8b);
cursor: pointer;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
border: none;
outline: none;
}
.share-btn-wrapper:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px -8px rgba(77, 62, 226, 0.5);
}
.share-btn-wrapper:active {
transform: translateY(-1px) scale(0.98);
box-shadow: 0 8px 16px -4px rgba(77, 62, 226, 0.4);
}
.share-inner {
position: relative;
width: 240px;
height: 60px;
background: linear-gradient(to bottom, #ffffff, #fafafa);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hover-panel {
position: absolute;
top: 0;
right: 0;
width: calc(100% - 28px);
height: 100%;
background: linear-gradient(90deg, #4d3ee2, #2c1fab);
border-radius: 999px;
transform: translateX(105%);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1;
}
.share-btn-wrapper:hover .hover-panel {
transform: translateX(0);
}
.share-text {
position: absolute;
font-size: 20px;
font-weight: 800;
letter-spacing: 0.5px;
color: #3528b9;
z-index: 2;
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.share-btn-wrapper:hover .share-text {
transform: translateX(-40px);
opacity: 0;
}
.social-icons {
position: absolute;
top: 0;
right: 0;
width: calc(100% - 28px);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
z-index: 3;
transform: translateX(40px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.share-btn-wrapper:hover .social-icons {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
transition-delay: 0.05s;
}
.social-icons svg {
width: 20px;
height: 20px;
fill: none;
stroke: #ffffff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition:
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.2s ease;
cursor: pointer;
}
.social-icons svg:hover {
transform: scale(1.2) translateY(-2px);
opacity: 0.9;
}