mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
210 lines
No EOL
7.1 KiB
HTML
210 lines
No EOL
7.1 KiB
HTML
<button>
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><circle cx="64" cy="64" r="60" fill="#FCE5AC"></circle><path fill="#F1C688" d="M62.34 8.58c-.02 1.36-3.4 2.23-7.38 2.6c-3.98.37-7.3.11-7.65-1.2c-.35-1.31 2.69-3.26 7.03-3.68s8.01.92 8 2.28zm57.03 50.89c-.01-.4.01-.8.08-1.21c1.22-7.23 1.8-14-6.32-18.14c-.89-.46-1.87-.83-2.55-1.57c-1.25-1.35-1.14-3.41-1.46-5.22c-.97-5.54-7.24-9.51-12.66-8.01c-1.78.49-3.64 1.47-5.35.8c-1.38-.54-2.16-1.97-2.94-3.23c-2.21-3.58-5.6-6.76-9.77-7.34c-4.17-.59-8.91 2.3-9.17 6.5c-.11 1.83.2 3.99 1.6 5.18c5.88 5.01 9.52 1.32 12.25 3.91c3.17 3.01-3.41 3.82-2.32 11.47c.55 3.82 4.34 7.4 8.19 7.08c1.71-.15 4.31-.24 5.26 1.19c.75 1.12.56 2.19.56 4.03c0 4.54.5 8.11 4.92 9.14c.57.13 1.19.2 1.72-.03c1.17-.51 1.16-2.08 1.08-3.36c-.35-5.62-4.31-6.76-5.03-9.85c-.91-3.94 4.47-9.27 8.87-7.78c3.5 1.19.65 5.25 3.21 9.94c1.69 3.11 5.01 4.54 6.24 7.08c1.23 2.54.09 4.3.69 5.91c.93 2.52 2.41 2.56 3.24 1.67c.91-.97.61-2.96.39-4.12c-.24-1.35-.69-2.67-.73-4.04zm-95.13 42.57c.11-.16.99-.39 2.01.57c1.02.95 4.03 3.79 5.23 4.88c1.2 1.09.03 2.01-.97 1.83c-4.8-.84-7.42-5.61-6.27-7.28zm17.8 12.38c.05-.19.79-.71 2.08-.19s5.12 2.11 6.63 2.7c1.51.59.74 1.86-.25 2.06c-4.8.92-8.94-2.6-8.46-4.57zm6.26-3.58c.6.47 1.21 1.21.93 1.91c-.26.64-1.08.81-1.77.83c-2.28.07-4.56-.51-6.55-1.6c-1.4-.77-5.07-3.14-4.55-5.13c.74-2.82 10.4 2.8 11.94 3.99zM97.71 106c-.22-.13-.6-1.22.58-2.57c1.18-1.35 4.68-5.33 6.01-6.92s2.66-.18 2.52 1.09c-.7 6.11-6.79 9.73-9.11 8.4zm11.3-11.81c-.2-.04-.77-.78-.21-2.12s2.23-5.29 2.85-6.84c.62-1.56 2-.82 2.21.2c1.02 4.86-2.73 9.19-4.85 8.76zm-22.5-80.87c-.04.2-.79.79-2.12.27s-5.25-2.1-6.8-2.68c-1.55-.58-.79-1.98.22-2.22c4.88-1.15 9.16 2.49 8.7 4.63zm-30.04 2.15c-9.5-1.73-12.9 3.96-15.81 5.2c-2.32.98-3.92-.73-7.5 1.46c-4.94 3.01-3.07 5.19-3.52 7.74c-.46 2.55-3.19 3.64-5.19 3.83c-2.37.23-2.56-1.21-1.42-2.94c.63-.95 1.3-1.54 1.62-2.66c.37-1.3.17-2.7.89-3.9c1.13-1.88 3.77-2.14 5.4-3.6c1.18-1.06 1.75-2.69 3.01-3.66c1.26-.97 2.9-1.32 4.47-1.6c3.2-.57 5.9-3.09 4.45-3.17c-1.46-.08-3.89-.55-5.93.95c-2.27 1.66-5.32 2.18-7.73 3.55c-2.7 1.55-4.12 4.92-4.94 5.83c-.82.91-3.46 1-5.28 2.88c-3.8 3.89-10.14 18.02-10.14 23.31c0 4.93 2.19 9.75 7.08 11.09c.74.2 1.53.43 2.01 1.03c1.1 1.37-1.65 5.49-2.07 7.15c-1.07 4.3.1 7.61 2 9.98c4.11 5.11 8.21 4.42 12.33 1.89c1-.62 1.86-1.49 2.97-1.9c2.34-.87 2.4.63 2.63 2.38c1.08 8.06 4.43 10.14 6.78 11.05c4.89 1.89 10.9.09 14.08-4.08s3.53-10.4.66-14.79c-4.38-6.7-13.03-7.07-14.78-10.82c-1.97-4.22 3.48-4.81 5.86-8.47c2.12-3.25 2.56-7.72.54-11.08c-1-1.66-2.66-3.32-2.24-5.21c.47-2.11 6.48-5.42 10.95-9.26c3.18-2.72 10.63-10.03-1.18-12.18zM26.01 48.86c-.34.65-.85 1.3-1.58 1.41c-.69.1-1.35-.34-1.78-.89c-.68-.89-.88-2.14-.45-3.17c.51-1.24 2.25-2.23 3.6-1.65c.73.31.95 1.05.91 1.86c-.05.89-.4 1.86-.7 2.44zm15.5 2.94c-.14.79-.39 1.55-.57 2.07c-.49 1.45-1.2 2.97-2.57 3.64c-.6.3-1.27.4-1.93.51c-1.37.21-3.08.28-3.79-.91c-.26-.43-.32-.95-.37-1.45c-.23-2.16-.34-4.67 1.25-6.14c1.14-1.06 2.42-.93 3.84-.94c.8 0 2.73-.26 3.41.18c.91.59.94 1.85.73 3.04z"></path></svg>
|
|
</span>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by reyvaxreecded - Tags: animation, button, space */
|
|
button {
|
|
all: unset;
|
|
position: relative;
|
|
width: 10em;
|
|
height: 10em;
|
|
border-radius: 100%;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
button>span>svg {
|
|
width: 8.5em;
|
|
height: 8.5em;
|
|
}
|
|
|
|
button>span {
|
|
position: relative;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
button:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0) 100%);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 100%;
|
|
-webkit-animation: pulse 1s ease-in-out infinite;
|
|
animation: pulse 1s ease-in-out infinite;
|
|
-webkit-transition: all 0.15s ease-in;
|
|
transition: all 0.15s ease-in;
|
|
}
|
|
|
|
button>span {
|
|
overflow: hidden;
|
|
-webkit-clip-path: circle(50% at 50% 50%);
|
|
clip-path: circle(50% at 50% 50%);
|
|
-webkit-transition: -webkit-transform 0.15s ease-in;
|
|
transition: -webkit-transform 0.15s ease-in;
|
|
transition: transform 0.15s ease-in;
|
|
transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in;
|
|
}
|
|
|
|
button > span:after {
|
|
content: '';
|
|
-webkit-clip-path: circle(50% at 50% 50%);
|
|
clip-path: circle(50% at 50% 50%);
|
|
width: 94.5%;
|
|
height: 94.5%;
|
|
position: absolute;
|
|
top: 0.27em;
|
|
z-index: 2;
|
|
background-color: #00000000;
|
|
border-radius: 100%;
|
|
background: radial-gradient(circle, rgba(254,123,0,0.52) 0%, rgba(191,0,0,0.9612219887955182) 100%);
|
|
-webkit-transition: all 0.25s ease-in;
|
|
transition: all 0.25s ease-in;
|
|
background-clip: content-box;
|
|
opacity: 0;
|
|
}
|
|
|
|
button > span:before {
|
|
content: '';
|
|
-webkit-clip-path: circle(50% at 50% 50%);
|
|
clip-path: circle(50% at 50% 50%);
|
|
width: 94.5%;
|
|
height: 94.5%;
|
|
position: absolute;
|
|
top: 0.27em;
|
|
z-index: 2;
|
|
background-color: #00000000;
|
|
border-radius: 100%;
|
|
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,222,0,1) 50%, rgba(255,0,0,0.9612219887955182) 100%);
|
|
background-clip: content-box;
|
|
opacity: 0;
|
|
}
|
|
|
|
button:hover >span:after {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
button:active > span > svg {
|
|
-webkit-transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
|
|
button:active > span:before {
|
|
-webkit-animation: implose 0.33s ease-in-out;
|
|
animation: implose 0.33s ease-in-out;
|
|
-webkit-animation-fill-mode: backwards;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
button:active > span:after {
|
|
display: none;
|
|
}
|
|
|
|
button:active:before {
|
|
display: none;
|
|
}
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes implose {
|
|
0% {
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scaleY(0);
|
|
transform: scaleY(0);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes implose {
|
|
0% {
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scaleY(0);
|
|
transform: scaleY(0);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|