mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
<button class="space-button">
|
|
<svg class="space-icon" viewBox="0 0 24 24" width="16" height="16">
|
|
<path fill="currentColor" d="M12 0c-1.2 0-2.2 1-2.2 2.2v3.3c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1V2.2C7.6 1 6.7 0 5.5 0S3.4 1 3.4 2.2v3.3c0 .6-.5 1.1-1.1 1.1S1.1 6.1 1.1 5.5V2.2C1.1 1 0 2 0 3.2 0 16.3 7.7 24 20.8 24 23 24 24 23 24 20.8c0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-2.1 1.7-3.8 3.8-3.8s3.8 1.7 3.8 3.8c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-1.2-1-2.2-2.2-2.2z"></path>
|
|
</svg>
|
|
Launch
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by mininaim - Tags: button */
|
|
.space-button {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 10px 20px;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.space-icon {
|
|
margin-right: 10px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Light Mode */
|
|
@media (prefers-color-scheme: light) {
|
|
.space-button {
|
|
background-color: #0074D9;
|
|
color: #fff;
|
|
box-shadow: 0px 0px 10px 0px #0074D9;
|
|
}
|
|
|
|
.space-button:hover {
|
|
box-shadow: 0px 0px 20px 0px #fff;
|
|
}
|
|
|
|
.space-button:active {
|
|
box-shadow: none;
|
|
background-color: #001f3f;
|
|
}
|
|
}
|
|
|
|
/* Dark Mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
.space-button {
|
|
background-color: #f0f0f0;
|
|
color: #000;
|
|
box-shadow: 0px 0px 10px 0px #000;
|
|
}
|
|
|
|
.space-button:hover {
|
|
box-shadow: 0px 0px 20px 0px #fff;
|
|
}
|
|
|
|
.space-button:active {
|
|
box-shadow: none;
|
|
background-color: #bbb;
|
|
}
|
|
}
|
|
|
|
</style>
|