mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
53 lines
1.4 KiB
HTML
53 lines
1.4 KiB
HTML
<a class="space-button" href="#">
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 18.5c-4.688 0-8.5-3.812-8.5-8.5s3.812-8.5 8.5-8.5 8.5 3.812 8.5 8.5-3.812 8.5-8.5 8.5zm1.5-10.5h-3v-4.5h-1v4.5h-3l4.5 5z" fill="currentColor"></path></svg>
|
|
Explore Space
|
|
</a>
|
|
|
|
<style>
|
|
/* From Uiverse.io by irfnmdlptra - Tags: button */
|
|
.space-button {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
font-size: 1.2rem;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
background-color: #2d3142;
|
|
border-radius: 5px;
|
|
border: none;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.space-button:hover {
|
|
background-color: #454b5d;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.space-button:active {
|
|
background-color: #1e222f;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.space-button svg {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: #fff;
|
|
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
|
|
transform: translateZ(0);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.space-button:hover svg {
|
|
transform: translateZ(10px) rotateY(180deg) rotateX(180deg);
|
|
}
|
|
|
|
.space-button:active svg {
|
|
transform: translateZ(5px) rotateY(180deg) rotateX(180deg);
|
|
}
|
|
|
|
</style>
|