mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
69 lines
No EOL
1.5 KiB
HTML
69 lines
No EOL
1.5 KiB
HTML
<button class="button">
|
|
<svg class="svgIcon" viewBox="0 0 384 512">
|
|
<path
|
|
d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: animation, black, button, arrow, hover effect, back to top, scroll to top */
|
|
.button {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: rgb(20, 20, 20);
|
|
border: none;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
|
|
cursor: pointer;
|
|
transition-duration: 0.3s;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.svgIcon {
|
|
width: 12px;
|
|
transition-duration: 0.3s;
|
|
}
|
|
|
|
.svgIcon path {
|
|
fill: white;
|
|
}
|
|
|
|
.button:hover {
|
|
width: 140px;
|
|
border-radius: 50px;
|
|
transition-duration: 0.3s;
|
|
background-color: rgb(181, 160, 255);
|
|
align-items: center;
|
|
}
|
|
|
|
.button:hover .svgIcon {
|
|
/* width: 20px; */
|
|
transition-duration: 0.3s;
|
|
transform: translateY(-200%);
|
|
}
|
|
|
|
.button::before {
|
|
position: absolute;
|
|
bottom: -20px;
|
|
content: "Back to Top";
|
|
color: white;
|
|
/* transition-duration: .3s; */
|
|
font-size: 0px;
|
|
}
|
|
|
|
.button:hover::before {
|
|
font-size: 13px;
|
|
opacity: 1;
|
|
bottom: unset;
|
|
/* transform: translateY(-30px); */
|
|
transition-duration: 0.3s;
|
|
}
|
|
|
|
</style>
|
|
|