mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
93 lines
No EOL
2 KiB
HTML
93 lines
No EOL
2 KiB
HTML
<a class="codepen-button"
|
|
><span class="span"
|
|
><p class="p">Shop</p>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
height="1em"
|
|
viewBox="0 0 576 512"
|
|
fill="#000"
|
|
class="cart"
|
|
>
|
|
<path
|
|
d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
|
|
></path></svg></span
|
|
></a>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Muhammad-Usman-911 - Website: https://uiverse.io/SelfMadeSystem/strange-cobra-12 - Name: SelfMadeSystem - Tags: button */
|
|
.codepen-button {
|
|
font-family: monospace;
|
|
font-weight: bolder;
|
|
display: block;
|
|
cursor: pointer;
|
|
color: #000;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
padding: 3px;
|
|
width: 130px;
|
|
isolation: isolate;
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
.codepen-button::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 420%;
|
|
height: 120%;
|
|
background: linear-gradient(
|
|
115deg,
|
|
#628fbc,
|
|
hsl(0, 93%, 73%),
|
|
#f032a7,
|
|
#329af0,
|
|
#f032a7
|
|
);
|
|
background-size: 25% 100%;
|
|
animation: border-animation 0.75s linear infinite;
|
|
animation-play-state: paused;
|
|
translate: -5% 0%;
|
|
transition: translate 0.25s ease-out;
|
|
}
|
|
|
|
.codepen-button:hover::before {
|
|
animation-play-state: running;
|
|
transition-duration: 0.75s;
|
|
translate: 0% 0%;
|
|
}
|
|
|
|
@keyframes border-animation {
|
|
to {
|
|
transform: translateX(-25%);
|
|
}
|
|
}
|
|
|
|
.codepen-button span {
|
|
position: relative;
|
|
display: block;
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1.1rem;
|
|
background: #fff;
|
|
border-radius: 3px;
|
|
height: 100%;
|
|
}
|
|
|
|
.codepen-button .span {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.codepen-button .p {
|
|
margin: 0;
|
|
}
|
|
|
|
</style>
|
|
|