پیشنمایش زنده
کد HTML
<div class="button-container">
<input type="checkbox" id="checknumber" hidden="" />
<label class="button" for="checknumber">
<div id="leftpart">
<p id="currentnumber">2</p>
<p id="movenumber">3</p>
</div>
<div id="rightpart">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#ff004c"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
id="likeimg"
>
<path
d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
></path>
</svg>
<div id="fontlikebutton">Dislike</div>
</div>
</label>
</div>
کد CSS
.button-container {
position: relative;
display: inline-block;
}
.button {
cursor: pointer;
width: 15em;
height: 5em;
display: flex;
align-items: center;
background-color: white;
border: none;
box-shadow: 0px 5px 0px rgba(45, 45, 45, 0.2);
overflow: hidden;
border-radius: 0.5em;
transition: all 0.2s ease;
}
.button svg {
transform: rotate(180deg);
}
#fontlikebutton {
font-family: "Trebuchet MS", sans-serif;
font-weight: 600;
font-size: 2em;
color: #ff004c;
margin-left: 0.2em;
}
.button:hover {
background-color: #ff004c;
}
.button:hover svg {
filter: brightness(0) invert(1);
transform: scale(1.5) translateX(100%) rotate(180deg) translate(-50%);
}
.button:hover #fontlikebutton {
transform: translateX(200%);
}
.button:active {
transform: scale(0.95) translateY(10%);
box-shadow: 0px 2px 0px 0px rgba(255, 0, 60, 0.5);
}
.button:active svg {
margin-bottom: 0.5em;
transform: scale(1.5) translateX(85%) rotate(150deg) translate(-75%);
}
.button:active #fontlikebutton {
transform: translateX(200%);
}
#likeimg {
transition: all 0.2s ease;
}
#rightpart {
width: 70%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#leftpart {
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Trebuchet MS", sans-serif;
font-weight: 600;
font-size: 2em;
background-color: #ff004c;
width: 30%;
height: 100%;
transition: all 0.2s ease;
}
.button:hover #leftpart {
color: #ff004c;
background: white;
}
#currentnumber {
transform: translateY(50%);
transition: all 0.2s ease;
}
#movenumber {
transform: translateY(-200%);
transition: all 0.2s ease;
}
#checknumber:checked ~ .button #currentnumber {
transform: translateY(200%);
}
#checknumber:checked ~ .button #movenumber {
transform: translateY(-50%);
}