mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
92 lines
3.3 KiB
HTML
92 lines
3.3 KiB
HTML
<button class="Btn">
|
|
<svg class="Layer" viewBox="0 0 1095.66 1095.63"><path class="cls-1" d="M1298,749.62c.4,300.41-243,548-548.1,547.9C446.23,1297.4,201.92,1051.2,202.29,749c.37-301.52,244.49-547.41,548.34-547.12C1055.43,202.18,1298.25,449.6,1298,749.62Z" transform="translate(-202.29 -201.89)"></path><path class="cls-2" d="M1285.89,749.79c-.25,297.07-241.24,535.86-536.12,535.66-296.34-.21-537-241.72-535.29-539,1.68-293.16,240.83-534.18,539.15-532.37C1046.8,215.84,1285.62,453.88,1285.89,749.79Z" transform="translate(-202.29 -201.89)"></path><path class="cls-3" d="M1195.29,749.56c.54,244.73-198.67,446.2-446.87,445.33C503.27,1194,304,994.53,304.93,748c.91-244.52,199.12-443.08,444.39-443.49C997.43,304,1195.74,505.59,1195.29,749.56Z" transform="translate(-202.29 -201.89)"></path><path class="cls-4" d="M1097.23,749.87c.22,190.31-154.42,347.43-348,346.92-192-.5-346.48-156.44-346.17-347.7C403.33,558,558.18,402,751.08,402.55,944.62,403.09,1097.69,560.56,1097.23,749.87Z" transform="translate(-202.29 -201.89)"></path><path class="cls-5" d="M1006.72,744.28c2.81,143.23-110.17,257.35-247.42,261.9C613.15,1011,498.22,895.93,493.71,758.88,488.93,613.71,603,498,740.69,493.28,886.73,488.24,1004,603.87,1006.72,744.28Z" transform="translate(-202.29 -201.89)"></path><path class="cls-6" d="M607.55,553.77c5.13,3.72,10.28,7.42,15.4,11.15l124.12,90.24a8.57,8.57,0,0,1,1.2.84c1.26,1.27,2.35,1.09,3.77,0,6.36-4.74,12.82-9.35,19.24-14l118.23-85.89c1.07-.78,2.17-1.54,3.28-2.32.82,1.1,0,2-.27,2.77Q866.29,637.48,840,718.38c-1.11,3.42-1.13,3.42,1.81,5.56l136,98.81c1.17.86,2.33,1.74,3.79,2.83-1.48.73-2.79.45-4,.45q-84.07,0-168.16,0h-.73c-3.7,0-3.68,0-4.8,3.43q-26.1,80.4-52.23,160.78c-.4,1.21-.45,2.66-1.77,3.6L735,948.24q-19.34-59.52-38.68-119c-1-3.16-1-3.17-4.6-3.17q-84.27,0-168.53,0a10.57,10.57,0,0,1-4.24-.34,13.17,13.17,0,0,1,3.33-2.77q67.55-49.08,135.1-98.18c5-3.63,4.38-1.8,2.43-7.83q-25.94-80.07-52-160.11c-.3-.91-.57-1.83-.85-2.75Z" transform="translate(-202.29 -201.89)"></path></svg>
|
|
<p class="text">Hover Me</p>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: button, superhero, captain, marvel, captain america */
|
|
.Btn {
|
|
position: relative;
|
|
width: 180px;
|
|
height: 50px;
|
|
border: none;
|
|
background-color: #005f99;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border-radius: 30px;
|
|
cursor: pointer;
|
|
box-shadow: 8px 8px 0px rgb(12, 12, 12);
|
|
transition-duration: .3s;
|
|
}
|
|
|
|
.Layer {
|
|
width: 60px;
|
|
position: absolute;
|
|
left: -30px;
|
|
transition-duration: .3s;
|
|
animation: spin 5s linear infinite;
|
|
}
|
|
|
|
.Btn:hover {
|
|
transform: translateY(5px);
|
|
box-shadow: 3px 3px 0px black;
|
|
transition-duration: .3s;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.Btn:hover .Layer {
|
|
left: 0%;
|
|
width: 100%;
|
|
transition-duration: .3s;
|
|
}
|
|
|
|
.text {
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 1.1em;
|
|
position: absolute;
|
|
z-index: 2;
|
|
transition-duration: .1s;
|
|
font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.Btn:hover .text {
|
|
color: transparent;
|
|
transition-duration: .3s;
|
|
}
|
|
/* svg colors */
|
|
.cls-1 {
|
|
fill: #242021;
|
|
}
|
|
|
|
.cls-2 {
|
|
fill: #e82728;
|
|
}
|
|
|
|
.cls-3 {
|
|
fill: #fefefe;
|
|
}
|
|
|
|
.cls-4 {
|
|
fill: #e92728;
|
|
}
|
|
|
|
.cls-5 {
|
|
fill: #005f99;
|
|
}
|
|
|
|
.cls-6 {
|
|
fill: #fff;
|
|
}
|
|
/* svg colors */
|
|
</style>
|