پیشنمایش زنده
کد HTML
<input class="toggle-checkbox" id="toggle-checkbox" type="checkbox" />
<label class="button" for="toggle-checkbox">
<div class="content">
<span class="letters">
<span style="--i: 1" data-label="C">C</span>
<span style="--i: 2" data-label="o">o</span>
<span style="--i: 3" data-label="p">p</span>
<span style="--i: 4" data-label="y">y</span>
<span style="--i: 5" data-label="L">L</span>
<span style="--i: 6" data-label="i">i</span>
<span style="--i: 7" data-label="n">n</span>
<span style="--i: 8" data-label="k">k</span>
</span>
<div class="icon-container">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.6"
fill="none"
data-slot="icon"
class="icon"
>
<path
class="bm"
d="M12.0017 6V4M8.14886 7.40371L6.86328 5.87162M15.864 7.40367L17.1496 5.87158"
></path>
<path
d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
stroke-linejoin="round"
stroke-linecap="round"
class="link"
></path>
</svg>
</div>
</div>
</label>
کد CSS
.toggle-checkbox {
display: none;
}
.button {
--white: #ffffff;
cursor: pointer;
background: linear-gradient(to bottom, #6e3bff, #7e51ff);
color: #ffffff;
border: 1px solid #af93ff;
border-radius: 8px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
box-shadow:
0 8px 10px -4px #503b89,
0 0 0 2px#562cce;
font-size: 25px;
}
.icon path.bm {
stroke-dasharray: 3;
stroke-dashoffset: 3;
stroke-width: 1px;
transform: translateX(-23px) translateY(16px) scale(2) rotate(-44deg);
}
.toggle-checkbox:checked + .button .icon path.bm {
animation: bump 1s ease forwards;
}
.toggle-checkbox:checked + .button .icon {
animation: beat 1s ease-in-out forwards;
}
.letters span:nth-child(5) {
margin-left: 5px;
}
.letters span:nth-child(6) {
margin-left: 1px;
}
.button:active .content {
box-shadow:
inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4),
inset 0px -3px 8px 0px #d190ff;
}
@keyframes bump {
20% {
stroke-dasharray: 3;
stroke-dashoffset: 3;
}
30% {
stroke-dasharray: 5;
stroke-dashoffset: 3;
}
30.1% {
stroke-dasharray: 3;
stroke-dashoffset: 6;
}
75% {
stroke-dasharray: 3;
stroke-dashoffset: 3;
}
100% {
stroke-dasharray: 3;
stroke-dashoffset: 3;
}
}
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.icon-container {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
background-color: #ffffff;
border-radius: 50%;
box-shadow:
inset 0 -2px 4px 0 #c6c6c6,
0 3px 6px rgba(0, 0, 0, 0.25);
text-align: center;
z-index: 10;
}
.icon-container .icon {
width: 25px;
height: 30px;
stroke: #592cd6;
margin-top: -2px;
z-index: 4;
transform: rotate(180deg);
}
.content {
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
position: relative;
height: 100%;
width: 100%;
padding: 4px;
gap: 16px;
border-radius: 7px;
font-weight: 600;
transition: all 0.3s ease;
}
.content::before {
content: "";
inset: 0;
position: absolute;
z-index: 10;
width: 80%;
top: 45%;
bottom: 35%;
opacity: 0.7;
margin: auto;
background: linear-gradient(to bottom, transparent, var(--purple-400));
filter: brightness(1.3) blur(5px);
}
.letters {
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.letters span {
display: block;
color: transparent;
position: relative;
left: 6px;
}
.letters span {
animation: letterShow 1.2s ease backwards calc(var(--i) * 0.03s);
}
.letters span::before,
.letters span::after {
content: attr(data-label);
position: absolute;
color: var(--white);
text-shadow: -1px 1px 2px var(--purple-500);
left: 0;
}
.letters span::before {
opacity: 0;
transform: translateY(-100%);
}
.button:hover .words {
opacity: 1;
}
.button:hover .letters span::before {
animation: letterShow 0.7s ease calc(var(--i) * 0.03s);
}
.button:hover .letters span::after {
opacity: 1;
animation: letterHide 0.7s ease calc(var(--i) * 0.03s);
}
@keyframes letterShow {
0% {
transform: translateY(50%);
opacity: 0;
filter: blur(20px);
}
20% {
transform: translateY(70%);
opacity: 1;
}
50% {
transform: translateY(-15%);
opacity: 1;
filter: blur(0);
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes letterHide {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-70%);
opacity: 0;
filter: blur(3px);
}
}