mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
46 lines
1 KiB
HTML
46 lines
1 KiB
HTML
<div class="main__action">
|
|
<a class="main__scroll" href="#">
|
|
<div class="main__scroll-box">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M11.9997 13.1716L7.04996 8.22186L5.63574 9.63607L11.9997 16L18.3637 9.63607L16.9495 8.22186L11.9997 13.1716Z" fill="rgba(28,28,30,1)">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
|
|
<span class="main__scroll-text">Scroll</span>
|
|
</a>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by ArturCodeCraft - Tags: button, scroll, scroll to bottom */
|
|
/* <reset-style> ============================ */
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
/* <main-style> ============================ */
|
|
.main__scroll-text {
|
|
color: rgba(28,28,30,1);
|
|
}
|
|
|
|
.main__action:hover .main__scroll-box {
|
|
animation: scroll-down 3s infinite;
|
|
}
|
|
|
|
/* Animate scroll icon */
|
|
@keyframes scroll-down {
|
|
0%, 100% {
|
|
transform: translateY(0rem);
|
|
opacity: 1;
|
|
}
|
|
|
|
35% {
|
|
transform: translateY(1rem);
|
|
opacity: 0;
|
|
}
|
|
|
|
70% {
|
|
transform: translateY(-1rem);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|