پیشنمایش زنده
کد HTML
<input id="toggle" type="checkbox" />
<label class="boton-minecraft" for="toggle">
<svg
viewBox="0 0 32 32"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M30 2H2v28h28z" fill="#52a535"></path>
<path
d="M24.4 13.2h-5.6v.47h5.6zm-5.6 8.4h-5.6v.47h5.6zm2.8 2.8h-2.8v.47h2.8zm-8.4 0h-2.8v.47h2.8zm0-11.2H7.6v.47h5.6z"
fill="#86d562"
></path>
<path
d="M24.4 13.2V7.6h-5.6v5.6h-5.6V16h-2.8v8.4h2.8v-2.8h5.6v2.8h2.8V16h-2.8v-2.8zM13.2 7.6H7.6v5.6h5.6z"
></path>
<path
d="M24.4 7.6h-5.6v.47h5.6zm-5.6 5.6h-5.6v.47h5.6zm-5.6-5.6H7.6v.47h5.6zm0 8.4h-2.8v.47h2.8zm8.4 0h-2.8v.47h2.8z"
fill="#2a641c"
></path>
</svg>
<div class="texto-boton">
<span>MINECRAFT</span>
<span>I LOVE MC</span>
<span>CREEPERS</span>
</div>
</label>
کد CSS
.boton-minecraft {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
font-size: 20px;
font-weight: bold;
color: white;
background-color: #228b22;
border: none;
border-radius: 8px;
cursor: pointer;
transition:
background 0.3s,
transform 0.1s,
color 0.3s;
position: relative;
overflow: hidden;
}
.boton-minecraft:hover {
background-color: black;
transform: scale(1.05);
}
.boton-minecraft svg {
width: 32px;
height: 32px;
transition: transform 0.3s;
}
.boton-minecraft:hover svg {
transform: scale(1.1);
}
.texto-boton {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 24px;
overflow: hidden;
}
.texto-boton span {
position: absolute;
transition: opacity 0.3s ease-in-out;
}
.texto-boton span:first-child {
opacity: 1;
}
.texto-boton span:nth-child(2),
.texto-boton span:nth-child(3) {
opacity: 0;
}
.boton-minecraft:hover .texto-boton span:first-child {
opacity: 0;
}
.boton-minecraft:hover .texto-boton span:nth-child(2) {
opacity: 1;
}
#toggle {
display: none;
}
#toggle:checked + .boton-minecraft {
background-color: white;
color: black;
}
#toggle:checked + .boton-minecraft .texto-boton span:first-child,
#toggle:checked + .boton-minecraft .texto-boton span:nth-child(2) {
opacity: 0;
}
#toggle:checked + .boton-minecraft .texto-boton span:nth-child(3) {
opacity: 1;
}