mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
63 lines
No EOL
1.3 KiB
HTML
63 lines
No EOL
1.3 KiB
HTML
<button class="button">
|
|
<svg
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
height="40"
|
|
width="40"
|
|
class="button__icon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path fill="none" d="M0 0h24v24H0z" stroke="none"></path>
|
|
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
|
|
<path d="M7 11l5 5l5 -5"></path>
|
|
<path d="M12 4l0 12"></path>
|
|
</svg>
|
|
<span class="button__text">Download</span>
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Creatlydev - Tags: button */
|
|
.button {
|
|
line-height: 1;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35em;
|
|
padding: 0.75em 1em;
|
|
padding-right: 1.25em;
|
|
color: #fff;
|
|
border: 1px solid transparent;
|
|
font-weight: 700;
|
|
border-radius: 2em;
|
|
font-size: 1rem;
|
|
box-shadow: 0 0.7em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
|
|
transition: transform 0.3s;
|
|
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(77, 54, 208, 1) 0%,
|
|
rgba(132, 116, 254, 1) 100%
|
|
);
|
|
}
|
|
|
|
.button__icon {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
|
|
.button:hover {
|
|
border-color: #f4f5f2;
|
|
}
|
|
|
|
.button:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 0.5em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
|
|
}
|
|
|
|
</style>
|
|
|