پیشنمایش زنده
کد HTML
<button class="noselect">
<span class="text">Confirm</span
><span class="icon"
><svg
viewBox="0 0 24 24"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
></path></svg
></span>
</button>
کد CSS
button {
width: 150px;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
background: Green;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
background: #00a600;
}
button,
button span {
transition: 200ms;
}
button .text {
transform: translateX(35px);
color: white;
font-weight: bold;
}
button .icon {
position: absolute;
border-left: 1px solid #006e00;
transform: translateX(110px);
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
button svg {
width: 20px;
fill: #eee;
}
button:hover {
background: ##00a600;
}
button:hover .text {
color: transparent;
}
button:hover .icon {
width: 150px;
border-left: none;
transform: translateX(0);
}
button:focus {
outline: none;
}
button:active .icon svg {
transform: scale(0.8);
}