پیشنمایش زنده
کد HTML
<button> Enter Room
<svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path>
</svg>
</button>
کد CSS
button {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
border-radius: 50px;
border: 0;
outline: 0;
font-size: 18px;
background: #08f;
color: #fff;
}
svg {
margin: 0 0 0 10px;
}
button:hover svg {
margin: 0 0 0 25px;
transition: 0.3s;
}
button:not(:hover) svg {
transition: 0.3s;
}
button:active {
transform: scale(0.9, 0.9);
transition: 200ms;
}
button:not(:active) {
transition: 200ms;
}