پیشنمایش زنده
کد HTML
<div class="share-wrapper">
<input id="share-toggle" type="checkbox" class="check" />
<label for="share-toggle" class="container">
<svg
class="icon inactive"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M18 16.08C17.24 16.08 16.56 16.38 16.05 16.87L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.95 7.13C16.46 7.62 17.24 7.92 18 7.92C19.66 7.92 21 6.58 21 4.92C21 3.26 19.66 1.92 18 1.92C16.34 1.92 15 3.26 15 4.92C15 5.16 15.04 5.39 15.09 5.62L8.05 9.79C7.54 9.3 6.76 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.76 15 7.54 14.7 8.05 14.21L15.18 18.38C15.13 18.61 15.09 18.84 15.09 19.08C15.09 20.74 16.43 22.08 18.09 22.08C19.75 22.08 21.09 20.74 21.09 19.08C21.09 17.42 19.75 16.08 18 16.08Z"
></path>
</svg>
<svg
class="icon active"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M18 16.08C17.24 16.08 16.56 16.38 16.05 16.87L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.95 7.13C16.46 7.62 17.24 7.92 18 7.92C19.66 7.92 21 6.58 21 4.92C21 3.26 19.66 1.92 18 1.92C16.34 1.92 15 3.26 15 4.92C15 5.16 15.04 5.39 15.09 5.62L8.05 9.79C7.54 9.3 6.76 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.76 15 7.54 14.7 8.05 14.21L15.18 18.38C15.13 18.61 15.09 18.84 15.09 19.08C15.09 20.74 16.43 22.08 18.09 22.08C19.75 22.08 21.09 20.74 21.09 19.08C21.09 17.42 19.75 16.08 18 16.08Z"
></path>
</svg>
<div class="checkmark"></div>
<span class="share-text">Share</span>
</label>
</div>
کد CSS
.share-wrapper {
--gap: 0.5em;
--radius: 0.35em;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
--dot-bg: #212121;
--dot-color: #313131;
--dot-size: 1px;
--dot-space: 22px;
background:
linear-gradient(
90deg,
var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
transparent 1%
)
center / var(--dot-space) var(--dot-space),
linear-gradient(
var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
transparent 1%
)
center / var(--dot-space) var(--dot-space),
var(--dot-color);
border: 0.1em solid #313131;
padding: 0.5em;
border-radius: var(--radius);
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.check[type="checkbox"] {
display: none;
}
.container {
display: flex;
align-items: center;
cursor: pointer;
margin-top: -0.25em;
margin-bottom: -0.25em;
}
.icon {
width: 1.5em;
height: 1.5em;
margin-left: 0.5em;
fill: white;
transition: opacity 0.3s ease-in-out;
}
.icon.active {
display: none;
fill: #2196f3;
}
.check[type="checkbox"]:checked + .container .icon.active {
display: inline-block;
animation: pop 0.5s ease-in-out;
}
.check[type="checkbox"]:checked + .container .icon.inactive {
display: none;
}
.share-text {
margin-left: 0.5em;
padding: 0.5em;
color: white;
font-family: Arial, sans-serif;
font-weight: bolder;
}
@keyframes pop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}