Space Button 🌌

Credits to MA Gang

How to setup:

Paste in the code
Go down to where the code

Replace "YOUR-URL" with your site url that you want the button to go to
Go down to where the code

Change "TEXT" to what even text you want displayed

Preview

Code :

<!DOCTYPE html>

<head>

<title>by UNBL0CKEDZ0NE</title>

<style>

body,

html {

margin: 0;

padding: 0;

height: 100%;

background: transparent;

display: flex;

align-items: center;

justify-content: center;

font-family: 'Pixelify Sans', sans-serif;

}

a {

text-decoration: none;

}

.btn {

position: relative;

display: flex;

justify-content: center;

align-items: center;

width: 14rem;

height: 3.5rem;

border-radius: 5rem;

background: linear-gradient(#000, #000), linear-gradient(135deg, black, black);

border: double 3px transparent;

background-origin: border-box;

background-clip: content-box, border-box;

cursor: pointer;

overflow: hidden;

transition: 0.4s;

box-shadow:

0 0 10px black,

inset 0 0 10px black,

0 4px 12px black;

animation: gradientShift 5s ease infinite;

}

.btn:hover {

transform: scale(1.08);

box-shadow:

0 0 20px rgba(255, 255, 255, 0.9),

inset 0 0 25px white,

0 6px 25px white;

}

.btn:active {

transform: scale(1);

box-shadow:

0 0 18px green,

inset 0 0 30px white,

0 4px 15px white;

}

strong {

position: relative;

z-index: 2;

font-size: 14px;

letter-spacing: 4px;

color: #fff;

font-family: 'Pixelify Sans', sans-serif;

text-shadow:

0 0 6px black,

0 0 10px black,

0 2px 2px black;

user-select: none;

}

#container-stars {

position: absolute;

z-index: 0;

width: 100%;

height: 100%;

overflow: hidden;

border-radius: 5rem;

backdrop-filter: blur(0.8rem);

}

#glow {

position: absolute;

display: flex;

width: 12rem;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

pointer-events: none;

z-index: 1;

}

.circle {

width: 100%;

height: 30px;

filter: blur(2rem);

background: white;

opacity: 0.2;

border-radius: 50%;

animation: pulseGlow 4s infinite;

}

.circle:nth-of-type(2) {

opacity: 0.1;

}

#stars {

position: relative;

background: transparent;

width: 200rem;

height: 200rem;

}

#stars::after {

content: "";

position: absolute;

top: -10rem;

left: -100rem;

width: 100%;

height: 100%;

animation: rotateStars 90s linear infinite;

background-image: radial-gradient(white 1px, transparent 1%);

background-size: 50px 50px;

}

#stars::before {

content: "";

position: absolute;

top: 0;

left: -50%;

width: 180%;

height: 500%;

animation: moveStars 60s linear infinite;

background-image: radial-gradient(white 1px, transparent 1%);

background-size: 50px 50px;

opacity: 0.4;

}

@keyframes moveStars {

from { transform: translateY(0); }

to { transform: translateY(-135rem); }

}

@keyframes rotateStars {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

@keyframes gradientShift {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

}

@keyframes pulseGlow {

0% { transform: scale(0.8); opacity: 0.15; }

70% { transform: scale(1); opacity: 0.3; }

100% { transform: scale(0.8); opacity: 0.15; }

}

</style>

</head>

<body>

</div>

</div>

</button>

</a>

</body>

</html>