Button by zanina-yassine

This button was created for css-challenge-1

Made by

@zanina-yassine

Theme:

Dark

#button

#212121

673 views

CSSAdd prefixes

1button#space-btn {
2  width: 100%;
3  height: 100%;
4  position: relative;
5  overflow: hidden;
6  border: 0;
7  outline: 0;
8  border-radius: 11px;
9  background: #03001e;
10  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
11  cursor: pointer;
12}
13
14.btn-container {
15  width: 200px;
16  height: 60px;
17  position: relative;
18  overflow: visible;
19}
20
21.btn-container::after {
22  content: "";
23  width: 100%;
24  height: 100%;
25  position: absolute;
26  left: 0;
27  top: 20px;
28  z-index: -1;
29  background: #03001e;
30  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
31  filter: blur(20px);
32  opacity: 0;
33}
34
35.btn-container:hover {
36  transform: scale(1.1);
37  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
38}
39
40.btn-container:hover:after {
41  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
42  opacity: 0.6;
43}
44
45button span {
46  color: white;
47  font-weight: 700;
48  font-size: 16px;
49}
50
51button#space-btn div.star {
52  width: 1px;
53  height: 1px;
54  background-color: white;
55  border-radius: 50%;
56  animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
57}
58
59button#space-btn div.shooting-star {
60  width: 80px;
61  height: 1px;
62  position: absolute;
63  background: linear-gradient(80deg, #ffffffff, #ffffff00);
64  border-radius: 50%;
65  transform: rotate(-40deg);
66  opacity: 0
67}
68
69button#space-btn div.shooting-star-1 {
70  animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
71}
72
73button#space-btn div.shooting-star-2 {
74  animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
75}
76
77button#space-btn div.shooting-star-3 {
78  animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
79}
80
81button#space-btn div.shooting-star-4 {
82  animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
83}
84
85@keyframes blink {
86  0% {
87    box-shadow: 0 0 10px 0 white;
88  }
89
90  50% {
91    box-shadow: 0 0 10px 2px white;
92  }
93
94  100% {
95    box-shadow: 0 0 10px 0 white;
96  }
97}
98
99@keyframes fallingStar1 {
100  0% {
101    top: -10px;
102    left: 220px;
103    opacity: 1;
104  }
105
106  100% {
107    top: 200px;
108    left: -20px;
109    opacity: 1;
110  }
111}
112
113@keyframes fallingStar2 {
114  0% {
115    top: -10px;
116    left: 150px;
117    opacity: 1;
118  }
119
120  100% {
121    top: 200px;
122    left: -90px;
123    opacity: 1;
124  }
125}
126
127@keyframes fallingStar3 {
128  0% {
129    top: -10px;
130    left: 80px;
131    opacity: 1
132  }
133
134  100% {
135    top: 200px;
136    left: -160px;
137    opacity: 1
138  }
139}
140
141@keyframes fallingStar4 {
142  0% {
143    top: -10px;
144    left: 0px;
145    opacity: 1;
146  }
147
148  100% {
149    top: 200px;
150    left: -240px;
151    opacity: 1;
152  }
153}
154

button#space-btn {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 0;
  outline: 0;
  border-radius: 11px;
  background: #03001e;
  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
  cursor: pointer;
}

.btn-container {
  width: 200px;
  height: 60px;
  position: relative;
  overflow: visible;
}

.btn-container::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 20px;
  z-index: -1;
  background: #03001e;
  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
  filter: blur(20px);
  opacity: 0;
}

.btn-container:hover {
  transform: scale(1.1);
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.btn-container:hover:after {
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
  opacity: 0.6;
}

button span {
  color: white;
  font-weight: 700;
  font-size: 16px;
}

button#space-btn div.star {
  width: 1px;
  height: 1px;
  background-color: white;
  border-radius: 50%;
  animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star {
  width: 80px;
  height: 1px;
  position: absolute;
  background: linear-gradient(80deg, #ffffffff, #ffffff00);
  border-radius: 50%;
  transform: rotate(-40deg);
  opacity: 0
}

button#space-btn div.shooting-star-1 {
  animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-2 {
  animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-3 {
  animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

button#space-btn div.shooting-star-4 {
  animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
}

@keyframes blink {
  0% {
    box-shadow: 0 0 10px 0 white;
  }

  50% {
    box-shadow: 0 0 10px 2px white;
  }

  100% {
    box-shadow: 0 0 10px 0 white;
  }
}

@keyframes fallingStar1 {
  0% {
    top: -10px;
    left: 220px;
    opacity: 1;
  }

  100% {
    top: 200px;
    left: -20px;
    opacity: 1;
  }
}

@keyframes fallingStar2 {
  0% {
    top: -10px;
    left: 150px;
    opacity: 1;
  }

  100% {
    top: 200px;
    left: -90px;
    opacity: 1;
  }
}

@keyframes fallingStar3 {
  0% {
    top: -10px;
    left: 80px;
    opacity: 1
  }

  100% {
    top: 200px;
    left: -160px;
    opacity: 1
  }
}

@keyframes fallingStar4 {
  0% {
    top: -10px;
    left: 0px;
    opacity: 1;
  }

  100% {
    top: 200px;
    left: -240px;
    opacity: 1;
  }
}

HTML

1<div class="btn-container">
2<button id="space-btn" name="space-button" type="submit">
3  <span>Let's Go to Space</span>
4<div style="position: absolute; left: 119.273px; top: 18.0747px; animation-delay: 3.37051s; transform: scale(0.196521);" class="star"></div><div style="position: absolute; left: 166.774px; top: 47.4519px; animation-delay: 3.03913s; transform: scale(0.33078);" class="star"></div><div style="position: absolute; left: 238.677px; top: 19.6434px; animation-delay: 3.85796s; transform: scale(1.29037);" class="star"></div><div style="position: absolute; left: 22.2022px; top: 4.69534px; animation-delay: 4.9415s; transform: scale(1.82231);" class="star"></div><div style="position: absolute; left: 206.74px; top: 40.7685px; animation-delay: 1.59195s; transform: scale(1.01375);" class="star"></div><div style="position: absolute; left: 241.531px; top: 14.2516px; animation-delay: 1.67616s; transform: scale(0.811597);" class="star"></div><div style="position: absolute; left: 14.754px; top: 25.2924px; animation-delay: 0.0348248s; transform: scale(0.102529);" class="star"></div><div style="position: absolute; left: 220.444px; top: 43.9803px; animation-delay: 1.5106s; transform: scale(0.16088);" class="star"></div><div style="position: absolute; left: 95.948px; top: 54.8942px; animation-delay: 3.18662s; transform: scale(1.7822);" class="star"></div><div style="position: absolute; left: 30.3484px; top: 36.5984px; animation-delay: 4.30868s; transform: scale(1.16326);" class="star"></div><div style="position: absolute; left: 184.622px; top: 20.0923px; animation-delay: 2.83829s; transform: scale(1.27781);" class="star"></div><div style="position: absolute; left: 142.1px; top: 22.3542px; animation-delay: 2.73988s; transform: scale(1.62715);" class="star"></div><div style="position: absolute; left: 145.079px; top: 6.97553px; animation-delay: 0.0408754s; transform: scale(0.468075);" class="star"></div><div style="position: absolute; left: 6.67886px; top: 38.4849px; animation-delay: 3.84019s; transform: scale(0.272217);" class="star"></div><div style="position: absolute; left: 201.17px; top: 39.9168px; animation-delay: 2.93587s; transform: scale(0.521258);" class="star"></div><div style="position: absolute; left: 224.215px; top: 42.9903px; animation-delay: 0.895495s; transform: scale(0.0458902);" class="star"></div><div style="position: absolute; left: 42.2308px; top: 9.78383px; animation-delay: 4.58407s; transform: scale(0.0422065);" class="star"></div><div style="position: absolute; left: 91.2734px; top: 14.0408px; animation-delay: 2.05927s; transform: scale(0.11997);" class="star"></div><div style="position: absolute; left: 35.6985px; top: 52.6403px; animation-delay: 3.07343s; transform: scale(0.672992);" class="star"></div><div style="position: absolute; left: 76.4191px; top: 48.453px; animation-delay: 2.35679s; transform: scale(1.46957);" class="star"></div><div style="position: absolute; left: 184.503px; top: 4.18267px; animation-delay: 1.43409s; transform: scale(0.606616);" class="star"></div><div style="position: absolute; left: 221.039px; top: 54.2493px; animation-delay: 2.92356s; transform: scale(0.638665);" class="star"></div><div style="position: absolute; left: 185.612px; top: 44.3px; animation-delay: 1.36401s; transform: scale(1.65012);" class="star"></div><div style="position: absolute; left: 154.027px; top: 45.9848px; animation-delay: 3.723s; transform: scale(1.4118);" class="star"></div><div style="position: absolute; left: 220.591px; top: 4.95194px; animation-delay: 0.363098s; transform: scale(0.52369);" class="star"></div><div style="position: absolute; left: 236.028px; top: 11.1663px; animation-delay: 3.67493s; transform: scale(0.956478);" class="star"></div><div style="position: absolute; left: 110.241px; top: 20.2684px; animation-delay: 2.94906s; transform: scale(1.2193);" class="star"></div><div style="position: absolute; left: 12.602px; top: 19.8836px; animation-delay: 4.072s; transform: scale(1.49026);" class="star"></div><div style="position: absolute; left: 30.0911px; top: 37.9746px; animation-delay: 1.02002s; transform: scale(1.41008);" class="star"></div><div style="position: absolute; left: 62.3096px; top: 9.64604px; animation-delay: 3.9445s; transform: scale(0.231214);" class="star"></div><div style="position: absolute; left: 44.7189px; top: 32.4307px; animation-delay: 4.78921s; transform: scale(0.359408);" class="star"></div><div style="position: absolute; left: 191.866px; top: 27.151px; animation-delay: 1.34451s; transform: scale(1.13484);" class="star"></div><div style="position: absolute; left: 47.6744px; top: 3.00604px; animation-delay: 1.04567s; transform: scale(0.682023);" class="star"></div><div style="position: absolute; left: 98.6225px; top: 49.6115px; animation-delay: 2.41384s; transform: scale(1.96254);" class="star"></div><div style="position: absolute; left: 57.4785px; top: 29.6588px; animation-delay: 3.3569s; transform: scale(1.53118);" class="star"></div><div style="position: absolute; left: 13.2213px; top: 24.538px; animation-delay: 1.69582s; transform: scale(1.6236);" class="star"></div><div style="position: absolute; left: 131.656px; top: 31.1837px; animation-delay: 1.29918s; transform: scale(1.84486);" class="star"></div><div style="position: absolute; left: 56.9067px; top: 51.9904px; animation-delay: 4.74375s; transform: scale(0.749788);" class="star"></div><div style="position: absolute; left: 82.8361px; top: 54.3876px; animation-delay: 1.28648s; transform: scale(0.566118);" class="star"></div><div style="position: absolute; left: 193.213px; top: 43.9428px; animation-delay: 0.390178s; transform: scale(1.411);" class="star"></div><div style="animation-delay: 1.2122s;" class="shooting-star shooting-star-1"></div><div style="animation-delay: 0.777895s;" class="shooting-star shooting-star-2"></div><div style="animation-delay: 4.90483s;" class="shooting-star shooting-star-3"></div><div style="animation-delay: 3.66012s;" class="shooting-star shooting-star-4"></div></button>
5</div>

<div class="btn-container">
<button id="space-btn" name="space-button" type="submit">
  <span>Let's Go to Space</span>
<div style="position: absolute; left: 119.273px; top: 18.0747px; animation-delay: 3.37051s; transform: scale(0.196521);" class="star"></div><div style="position: absolute; left: 166.774px; top: 47.4519px; animation-delay: 3.03913s; transform: scale(0.33078);" class="star"></div><div style="position: absolute; left: 238.677px; top: 19.6434px; animation-delay: 3.85796s; transform: scale(1.29037);" class="star"></div><div style="position: absolute; left: 22.2022px; top: 4.69534px; animation-delay: 4.9415s; transform: scale(1.82231);" class="star"></div><div style="position: absolute; left: 206.74px; top: 40.7685px; animation-delay: 1.59195s; transform: scale(1.01375);" class="star"></div><div style="position: absolute; left: 241.531px; top: 14.2516px; animation-delay: 1.67616s; transform: scale(0.811597);" class="star"></div><div style="position: absolute; left: 14.754px; top: 25.2924px; animation-delay: 0.0348248s; transform: scale(0.102529);" class="star"></div><div style="position: absolute; left: 220.444px; top: 43.9803px; animation-delay: 1.5106s; transform: scale(0.16088);" class="star"></div><div style="position: absolute; left: 95.948px; top: 54.8942px; animation-delay: 3.18662s; transform: scale(1.7822);" class="star"></div><div style="position: absolute; left: 30.3484px; top: 36.5984px; animation-delay: 4.30868s; transform: scale(1.16326);" class="star"></div><div style="position: absolute; left: 184.622px; top: 20.0923px; animation-delay: 2.83829s; transform: scale(1.27781);" class="star"></div><div style="position: absolute; left: 142.1px; top: 22.3542px; animation-delay: 2.73988s; transform: scale(1.62715);" class="star"></div><div style="position: absolute; left: 145.079px; top: 6.97553px; animation-delay: 0.0408754s; transform: scale(0.468075);" class="star"></div><div style="position: absolute; left: 6.67886px; top: 38.4849px; animation-delay: 3.84019s; transform: scale(0.272217);" class="star"></div><div style="position: absolute; left: 201.17px; top: 39.9168px; animation-delay: 2.93587s; transform: scale(0.521258);" class="star"></div><div style="position: absolute; left: 224.215px; top: 42.9903px; animation-delay: 0.895495s; transform: scale(0.0458902);" class="star"></div><div style="position: absolute; left: 42.2308px; top: 9.78383px; animation-delay: 4.58407s; transform: scale(0.0422065);" class="star"></div><div style="position: absolute; left: 91.2734px; top: 14.0408px; animation-delay: 2.05927s; transform: scale(0.11997);" class="star"></div><div style="position: absolute; left: 35.6985px; top: 52.6403px; animation-delay: 3.07343s; transform: scale(0.672992);" class="star"></div><div style="position: absolute; left: 76.4191px; top: 48.453px; animation-delay: 2.35679s; transform: scale(1.46957);" class="star"></div><div style="position: absolute; left: 184.503px; top: 4.18267px; animation-delay: 1.43409s; transform: scale(0.606616);" class="star"></div><div style="position: absolute; left: 221.039px; top: 54.2493px; animation-delay: 2.92356s; transform: scale(0.638665);" class="star"></div><div style="position: absolute; left: 185.612px; top: 44.3px; animation-delay: 1.36401s; transform: scale(1.65012);" class="star"></div><div style="position: absolute; left: 154.027px; top: 45.9848px; animation-delay: 3.723s; transform: scale(1.4118);" class="star"></div><div style="position: absolute; left: 220.591px; top: 4.95194px; animation-delay: 0.363098s; transform: scale(0.52369);" class="star"></div><div style="position: absolute; left: 236.028px; top: 11.1663px; animation-delay: 3.67493s; transform: scale(0.956478);" class="star"></div><div style="position: absolute; left: 110.241px; top: 20.2684px; animation-delay: 2.94906s; transform: scale(1.2193);" class="star"></div><div style="position: absolute; left: 12.602px; top: 19.8836px; animation-delay: 4.072s; transform: scale(1.49026);" class="star"></div><div style="position: absolute; left: 30.0911px; top: 37.9746px; animation-delay: 1.02002s; transform: scale(1.41008);" class="star"></div><div style="position: absolute; left: 62.3096px; top: 9.64604px; animation-delay: 3.9445s; transform: scale(0.231214);" class="star"></div><div style="position: absolute; left: 44.7189px; top: 32.4307px; animation-delay: 4.78921s; transform: scale(0.359408);" class="star"></div><div style="position: absolute; left: 191.866px; top: 27.151px; animation-delay: 1.34451s; transform: scale(1.13484);" class="star"></div><div style="position: absolute; left: 47.6744px; top: 3.00604px; animation-delay: 1.04567s; transform: scale(0.682023);" class="star"></div><div style="position: absolute; left: 98.6225px; top: 49.6115px; animation-delay: 2.41384s; transform: scale(1.96254);" class="star"></div><div style="position: absolute; left: 57.4785px; top: 29.6588px; animation-delay: 3.3569s; transform: scale(1.53118);" class="star"></div><div style="position: absolute; left: 13.2213px; top: 24.538px; animation-delay: 1.69582s; transform: scale(1.6236);" class="star"></div><div style="position: absolute; left: 131.656px; top: 31.1837px; animation-delay: 1.29918s; transform: scale(1.84486);" class="star"></div><div style="position: absolute; left: 56.9067px; top: 51.9904px; animation-delay: 4.74375s; transform: scale(0.749788);" class="star"></div><div style="position: absolute; left: 82.8361px; top: 54.3876px; animation-delay: 1.28648s; transform: scale(0.566118);" class="star"></div><div style="position: absolute; left: 193.213px; top: 43.9428px; animation-delay: 0.390178s; transform: scale(1.411);" class="star"></div><div style="animation-delay: 1.2122s;" class="shooting-star shooting-star-1"></div><div style="animation-delay: 0.777895s;" class="shooting-star shooting-star-2"></div><div style="animation-delay: 4.90483s;" class="shooting-star shooting-star-3"></div><div style="animation-delay: 3.66012s;" class="shooting-star shooting-star-4"></div></button>
</div>