Button by wizard503

This button was created for css-challenge-1

Made by

@wizard503

Theme:

Dark

#button

#212121

366 views

CSSAdd prefixes

1button#space-btn {
2  width: 200px;
3  height: 60px;
4  position: relative;
5  border: none;
6  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
7  box-shadow: inset 0px 0px 21px #3b2ad5;
8  background: #03001e;
9  cursor: pointer;
10}
11
12button#space-btn:hover {
13  background: linear-gradient(180deg, #3b2ad5 0%,#88007d 60%,#ff0055c4 100%);
14  box-shadow: 0px 5px 10px #03001e,inset 0px 5px 10px #8611d4,inset 0 -5px 10px #ff0055a1;
15}
16
17.btn-container:hover {
18  background: #03001e;
19  box-shadow: 0px -10px 40px #9611d4,0px 5px 10px #00a2ffe3,inset 0px 10px 21px #3b2ad5;
20}
21
22.btn-container {
23  display: flex;
24  justify-content: center;
25  align-items: center;
26  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
27  width: 205px;
28  height: 65px;
29  background: linear-gradient(0deg, #88007d 0%,#ff0055c4 100%);
30}
31
32button span {
33  color: white;
34  font-weight: bold;
35  font-size: 20px;
36}
37
38button div.star {
39  opacity: 0;
40  position: absolute;
41  border-radius: 100%;
42  background-color: white;
43  width: 1px;
44  height: 1px;
45}
46
47button:hover .star {
48  opacity: 1;
49}
50
51button .planet {
52  margin-left: -2.5em;
53  opacity: 0;
54  width: 30px;
55  height: 30px;
56  border-radius: 50%;
57  border: none;
58  position: absolute;
59  background: linear-gradient(rgb(255, 0, 0), transparent),linear-gradient(to top left, rgb(255, 0, 212), transparent), linear-gradient(to top right, rgb(251, 255, 0), transparent);
60  background-blend-mode: screen;
61  background-size: 100% 200%;
62  filter: drop-shadow(0px 0px 4px rgb(82, 59, 16));
63}
64
65button:hover .planet {
66  z-index: 1;
67  opacity: 1;
68  animation: orbita 6s reverse linear infinite;
69}
70
71.planet::after {
72  content: '';
73  width: 40px;
74  height: 10px;
75  border: 3px solid #813dff;
76  filter: drop-shadow(0px 0px 1px #cf3333);
77  border-width: 0px 3px 3px 3px;
78  position: absolute;
79  top: 50%;
80  left: 50%;
81  transform: translate(-50%, -50%) rotate(15deg);
82  border-radius: 50%;
83}
84
85.planet::before {
86  position: absolute;
87  color: rgb(255, 0, 0);
88  visibility: hidden;
89}
90
91.moon {
92  margin-left: -3rem;
93  position: absolute;
94  width: 30px;
95  height: 30px;
96  background-color: #fff;
97  border-radius: 100%;
98  box-shadow: 0px 0px 10px 5px rgb(146, 146, 140);
99}
100
101.moon::after {
102  position: absolute;
103  content: '';
104  margin-top: 15%;
105  box-shadow: 0px 0px 10px 3px #333;
106  margin-left: -10%;
107  border-radius: 100%;
108  width: 3px;
109  height: 3px;
110  background-color: rgb(121, 121, 121);
111}
112
113.moon1::after {
114  position: absolute;
115  content: '';
116  margin-top: 65%;
117  box-shadow: 0px 0px 8px 3px #333;
118  margin-left: -9px;
119  border-radius: 100%;
120  width: 2px;
121  height: 2px;
122  background-color: rgb(121, 121, 121);
123}
124
125.moon::before {
126  position: absolute;
127  content: '';
128  margin-top: 30%;
129  margin-left: -30%;
130  border-radius: 100%;
131  box-shadow: 0px 0px 8px 1px rgb(3, 3, 3);
132  width: 5px;
133  height: 5px;
134  background-color: rgb(134, 133, 133);
135}
136
137.moon1::before {
138  position: absolute;
139  content: '';
140  margin-top: 70%;
141  margin-left: 4%;
142  border-radius: 100%;
143  box-shadow: -5px 1px 4px 3px rgb(134, 133, 133);
144  width: 2px;
145  height: 2px;
146  background-color: rgb(134, 133, 133);
147}
148
149button span.moon,span.moon1 {
150  opacity: 0;
151}
152
153button:hover span.moon,span.moon1 {
154  z-index: -1;
155  opacity: 1;
156  animation: orbita 2.7s linear infinite;
157}
158
159@keyframes orbita {
160  0% {
161    transform: rotate(0deg);
162    transform: translateX(90px);
163  }
164
165  100% {
166    rotate: 360deg;
167    transform: translateX(90px);
168  }
169}

button#space-btn {
  width: 200px;
  height: 60px;
  position: relative;
  border: none;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: inset 0px 0px 21px #3b2ad5;
  background: #03001e;
  cursor: pointer;
}

button#space-btn:hover {
  background: linear-gradient(180deg, #3b2ad5 0%,#88007d 60%,#ff0055c4 100%);
  box-shadow: 0px 5px 10px #03001e,inset 0px 5px 10px #8611d4,inset 0 -5px 10px #ff0055a1;
}

.btn-container:hover {
  background: #03001e;
  box-shadow: 0px -10px 40px #9611d4,0px 5px 10px #00a2ffe3,inset 0px 10px 21px #3b2ad5;
}

.btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
  width: 205px;
  height: 65px;
  background: linear-gradient(0deg, #88007d 0%,#ff0055c4 100%);
}

button span {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

button div.star {
  opacity: 0;
  position: absolute;
  border-radius: 100%;
  background-color: white;
  width: 1px;
  height: 1px;
}

button:hover .star {
  opacity: 1;
}

button .planet {
  margin-left: -2.5em;
  opacity: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  position: absolute;
  background: linear-gradient(rgb(255, 0, 0), transparent),linear-gradient(to top left, rgb(255, 0, 212), transparent), linear-gradient(to top right, rgb(251, 255, 0), transparent);
  background-blend-mode: screen;
  background-size: 100% 200%;
  filter: drop-shadow(0px 0px 4px rgb(82, 59, 16));
}

button:hover .planet {
  z-index: 1;
  opacity: 1;
  animation: orbita 6s reverse linear infinite;
}

.planet::after {
  content: '';
  width: 40px;
  height: 10px;
  border: 3px solid #813dff;
  filter: drop-shadow(0px 0px 1px #cf3333);
  border-width: 0px 3px 3px 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  border-radius: 50%;
}

.planet::before {
  position: absolute;
  color: rgb(255, 0, 0);
  visibility: hidden;
}

.moon {
  margin-left: -3rem;
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 10px 5px rgb(146, 146, 140);
}

.moon::after {
  position: absolute;
  content: '';
  margin-top: 15%;
  box-shadow: 0px 0px 10px 3px #333;
  margin-left: -10%;
  border-radius: 100%;
  width: 3px;
  height: 3px;
  background-color: rgb(121, 121, 121);
}

.moon1::after {
  position: absolute;
  content: '';
  margin-top: 65%;
  box-shadow: 0px 0px 8px 3px #333;
  margin-left: -9px;
  border-radius: 100%;
  width: 2px;
  height: 2px;
  background-color: rgb(121, 121, 121);
}

.moon::before {
  position: absolute;
  content: '';
  margin-top: 30%;
  margin-left: -30%;
  border-radius: 100%;
  box-shadow: 0px 0px 8px 1px rgb(3, 3, 3);
  width: 5px;
  height: 5px;
  background-color: rgb(134, 133, 133);
}

.moon1::before {
  position: absolute;
  content: '';
  margin-top: 70%;
  margin-left: 4%;
  border-radius: 100%;
  box-shadow: -5px 1px 4px 3px rgb(134, 133, 133);
  width: 2px;
  height: 2px;
  background-color: rgb(134, 133, 133);
}

button span.moon,span.moon1 {
  opacity: 0;
}

button:hover span.moon,span.moon1 {
  z-index: -1;
  opacity: 1;
  animation: orbita 2.7s linear infinite;
}

@keyframes orbita {
  0% {
    transform: rotate(0deg);
    transform: translateX(90px);
  }

  100% {
    rotate: 360deg;
    transform: translateX(90px);
  }
}

HTML

1<div class="btn-container">
2  <button type="submit" name="space-button" id="space-btn">
3    <span>Look Up</span>
4    <span class="moon"><span class="moon1"></span></span>
5    <span class="planet"></span>
6    <div class="star" style="left: 119.273px;
7        top: 18.0747px;
8        animation-delay: 3.37051s;
9        transform: scale(1.1);"></div>
10    <div class="star" style="left: 22.2022px;
11        top: 10.69534px;
12        animation-delay: 4.9s;
13        transform: scale(2.22);"></div>
14    <div class="star" style="left: 14.754px;
15        top: 25.2924px;
16        animation-delay: 0.05s;
17        transform: scale(0.1);"></div>
18    <div class="star" style="left: 95.948px;
19        top: 54.8942px;
20        animation-delay: 3.1s;
21        transform: scale(1.87);"></div>
22    <div class="star" style="left: 184.622px;
23        top: 20.0923px;
24        animation-delay: 2.8s;
25        transform: scale(1.77);"></div>
26    <div class="star" style="left: 142.1px;
27        top: 22.3542px;
28        animation-delay: 2.73988s;
29        transform: scale(1.62715);"></div>
30    <div class="star" style="left: 145.079px;
31        top: 6.97553px;
32        animation-delay: 0.0408754s;
33        transform: scale(0.468075);"></div>
34    <div class="star" style="left: 42.2308px;
35        top: 9.78383px;
36        animation-delay: 4.58407s;
37        transform: scale(0.0422065);"></div>
38    <div class="star" style="left: 91.2734px;
39        top: 14.0408px;
40        animation-delay: 2.05927s;
41        transform: scale(0.11997);"></div>
42    <div class="star" style="left: 35.6985px;
43        top: 52.6403px;
44        animation-delay: 3.07343s;
45        transform: scale(0.672992);"></div>
46    <div class="star" style="left: 76.4191px;
47        top: 48.453px;
48        animation-delay: 2.35679s;
49        transform: scale(2.001);"></div>
50    <div class="star" style="left: 154.027px;
51        top: 45.9848px;
52        animation-delay: 3.723s;
53        transform: scale(1.4118);"></div>
54    <div class="star" style="left: 110.241px;
55        top: 20.2684px;
56        animation-delay: 2.94906s;
57        transform: scale(1.2193);"></div>
58    <div class="star" style="left: 12.602px;
59        top: 19.8836px;
60        animation-delay: 4.072s;
61        transform: scale(1.49026);"></div>
62    <div class="star" style="left: 30.0911px;
63        top: 37.9746px;
64        animation-delay: 1.02002s;
65        transform: scale(1.41008);"></div>
66    <div class="star" style="left: 62.3096px;
67        top: 9.64604px;
68        animation-delay: 3.9445s;
69        transform: scale(0.231214);"></div>
70    <div class="star" style="left: 44.7189px;
71        top: 32.4307px;
72        animation-delay: 4.78921s;
73        transform: scale(0.359408);"></div>
74    <div class="star" style="left: 191.866px;
75        top: 27.151px;
76        animation-delay: 1.34451s;
77        transform: scale(1.13484);"></div>
78    <div class="star" style="left: 47.6744px;
79        top: 3.00604px;
80        animation-delay: 1.04567s;
81        transform: scale(0.682023);"></div>
82    <div class="star" style="left: 98.6225px;
83        top: 49.6115px;
84        animation-delay: 2.41384s;
85        transform: scale(1.96254);"></div>
86    <div class="star" style="left: 57.4785px;
87        top: 29.6588px;
88        animation-delay: 3.3569s;
89        transform: scale(1.53118);"></div>
90    <div class="star" style="left: 13.2213px;
91        top: 24.538px;
92        animation-delay: 1.69582s;
93        transform: scale(1.6236);"></div>
94    <div class="star" style="left: 56.9067px;
95        top: 51.9904px;
96        animation-delay: 4.74375s;
97        transform: scale(0.749788);"></div>
98    <div class="star" style="left: 139.8361px;
99        top: 45.3876px;
100        animation-delay: 1.28648s;
101        transform: scale(0.566118);"></div>
102    <div class="star" style="right: 40.9067px;
103        top: 21.9904px;
104        animation-delay: 4.74375s;
105        transform: scale(0.749788);"></div>
106    <div class="star" style="right: 30.9067px;
107        top: 26.9904px;
108        animation-delay: 4.74375s;
109        transform: scale(0.749788);"></div>
110    <div class="star" style="right: 30.9067px;
111        top: 16.9904px;
112        animation-delay: 4.74375s;
113        transform: scale(0.749788);"></div>
114    <div class="star" style="right: 20.9067px;
115        top: 10.904px;
116        animation-delay: 4.74375s;
117        transform: scale(0.749788);"></div>
118    <div class="star" style="right: 40.9067px;
119        top: 8.9904px;
120        animation-delay: 4.74375s;
121        transform: scale(0.749788);"></div>
122    <div class="star" style="left: 80.9067px;
123        top: 8.9904px;
124        animation-delay: 4.74375s;
125        transform: scale(0.749788);"></div>
126    <div class="star" style="left: 100.9067px;
127        top: 6.9904px;
128        animation-delay: 4.74375s;
129        transform: scale(0.749788);"></div>
130    <div class="star" style="left: 130.9067px;
131        top: 8.9904px;
132        animation-delay: 4.74375s;
133        transform: scale(0.749788);"></div>
134    <div class="star" style="right: 80.9067px;
135        top: 5.9904px;
136        animation-delay: 4.74375s;
137        transform: scale(1.9999998);"></div>
138    <div class="star" style="right: 45.9067px;
139        top: 35.9904px;
140        animation-delay: 4.74375s;
141        transform: scale(1.999998);"></div>
142    <div class="star" style="right: 85.9067px;
143        top: 44.9904px;
144        animation-delay: 4.74375s;
145        transform: scale(1.99998998);"></div>
146  </button>
147</div>
148

<div class="btn-container">
  <button type="submit" name="space-button" id="space-btn">
    <span>Look Up</span>
    <span class="moon"><span class="moon1"></span></span>
    <span class="planet"></span>
    <div class="star" style="left: 119.273px;
        top: 18.0747px;
        animation-delay: 3.37051s;
        transform: scale(1.1);"></div>
    <div class="star" style="left: 22.2022px;
        top: 10.69534px;
        animation-delay: 4.9s;
        transform: scale(2.22);"></div>
    <div class="star" style="left: 14.754px;
        top: 25.2924px;
        animation-delay: 0.05s;
        transform: scale(0.1);"></div>
    <div class="star" style="left: 95.948px;
        top: 54.8942px;
        animation-delay: 3.1s;
        transform: scale(1.87);"></div>
    <div class="star" style="left: 184.622px;
        top: 20.0923px;
        animation-delay: 2.8s;
        transform: scale(1.77);"></div>
    <div class="star" style="left: 142.1px;
        top: 22.3542px;
        animation-delay: 2.73988s;
        transform: scale(1.62715);"></div>
    <div class="star" style="left: 145.079px;
        top: 6.97553px;
        animation-delay: 0.0408754s;
        transform: scale(0.468075);"></div>
    <div class="star" style="left: 42.2308px;
        top: 9.78383px;
        animation-delay: 4.58407s;
        transform: scale(0.0422065);"></div>
    <div class="star" style="left: 91.2734px;
        top: 14.0408px;
        animation-delay: 2.05927s;
        transform: scale(0.11997);"></div>
    <div class="star" style="left: 35.6985px;
        top: 52.6403px;
        animation-delay: 3.07343s;
        transform: scale(0.672992);"></div>
    <div class="star" style="left: 76.4191px;
        top: 48.453px;
        animation-delay: 2.35679s;
        transform: scale(2.001);"></div>
    <div class="star" style="left: 154.027px;
        top: 45.9848px;
        animation-delay: 3.723s;
        transform: scale(1.4118);"></div>
    <div class="star" style="left: 110.241px;
        top: 20.2684px;
        animation-delay: 2.94906s;
        transform: scale(1.2193);"></div>
    <div class="star" style="left: 12.602px;
        top: 19.8836px;
        animation-delay: 4.072s;
        transform: scale(1.49026);"></div>
    <div class="star" style="left: 30.0911px;
        top: 37.9746px;
        animation-delay: 1.02002s;
        transform: scale(1.41008);"></div>
    <div class="star" style="left: 62.3096px;
        top: 9.64604px;
        animation-delay: 3.9445s;
        transform: scale(0.231214);"></div>
    <div class="star" style="left: 44.7189px;
        top: 32.4307px;
        animation-delay: 4.78921s;
        transform: scale(0.359408);"></div>
    <div class="star" style="left: 191.866px;
        top: 27.151px;
        animation-delay: 1.34451s;
        transform: scale(1.13484);"></div>
    <div class="star" style="left: 47.6744px;
        top: 3.00604px;
        animation-delay: 1.04567s;
        transform: scale(0.682023);"></div>
    <div class="star" style="left: 98.6225px;
        top: 49.6115px;
        animation-delay: 2.41384s;
        transform: scale(1.96254);"></div>
    <div class="star" style="left: 57.4785px;
        top: 29.6588px;
        animation-delay: 3.3569s;
        transform: scale(1.53118);"></div>
    <div class="star" style="left: 13.2213px;
        top: 24.538px;
        animation-delay: 1.69582s;
        transform: scale(1.6236);"></div>
    <div class="star" style="left: 56.9067px;
        top: 51.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 139.8361px;
        top: 45.3876px;
        animation-delay: 1.28648s;
        transform: scale(0.566118);"></div>
    <div class="star" style="right: 40.9067px;
        top: 21.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 30.9067px;
        top: 26.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 30.9067px;
        top: 16.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 20.9067px;
        top: 10.904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 40.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 80.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 100.9067px;
        top: 6.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="left: 130.9067px;
        top: 8.9904px;
        animation-delay: 4.74375s;
        transform: scale(0.749788);"></div>
    <div class="star" style="right: 80.9067px;
        top: 5.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.9999998);"></div>
    <div class="star" style="right: 45.9067px;
        top: 35.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.999998);"></div>
    <div class="star" style="right: 85.9067px;
        top: 44.9904px;
        animation-delay: 4.74375s;
        transform: scale(1.99998998);"></div>
  </button>
</div>