پیشنمایش زنده
کد HTML
<div class="container">
<button class="button">Button</button>
<span class="arrow first">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path>
</svg>
</span>
<span class="arrow second">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path>
</svg>
</span>
<span class="arrow third">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path>
</svg>
</span>
</div>
کد CSS
.container {
display: flex;
position: relative;
}
.button {
cursor: pointer;
background: none;
border: none;
border-radius: 8px;
padding: .5em 1.5em;
font-size: 20px;
font-weight: 600;
color: #7f5af0;
transition: all .3s ease;
}
.arrow {
fill: #94a1b2;
position: absolute;
pointer-events: none;
width: 24px;
right: 0;
top: 25%;
transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.button:hover {
letter-spacing: 2px;
}
.button:hover ~.second {
opacity: .66;
right: -20px;
transition-delay: 50ms;
}
.button:hover ~.third {
opacity: .33;
right: -40px;
transition-delay: 100ms;
}
.second,
.third {
opacity: 0;
}