mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
68 lines
1.6 KiB
HTML
68 lines
1.6 KiB
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>
|
|
<style>
|
|
/* From Uiverse.io by benjimich - Tags: icon, button, arrow */
|
|
.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;
|
|
}
|
|
</style>
|