Button by JkHuger

Made by

@JkHuger

Theme:

Light

#button

#e8e8e8

2.1K views

CSSAdd prefixes

1.menu-item,
2.menu-open-button {
3  background: #EEEEEE;
4  border-radius: 100%;
5  width: 80px;
6  height: 80px;
7  margin-left: -40px;
8  position: absolute;
9  color: #FFFFFF;
10  text-align: center;
11  line-height: 80px;
12  -webkit-transform: translate3d(0, 0, 0);
13  transform: translate3d(0, 0, 0);
14  -webkit-transition: -webkit-transform ease-out 200ms;
15  transition: -webkit-transform ease-out 200ms;
16  transition: transform ease-out 200ms;
17}
18
19.menu-open {
20  display: none;
21}
22
23.lines {
24  width: 25px;
25  height: 3px;
26  background: #596778;
27  display: block;
28  position: absolute;
29  top: 50%;
30  left: 50%;
31  margin-left: -12.5px;
32  margin-top: -1.5px;
33  -webkit-transition: -webkit-transform 200ms;
34  transition: -webkit-transform 200ms;
35  transition: transform 200ms;
36}
37
38.line-1 {
39  -webkit-transform: translate3d(0, -8px, 0);
40  transform: translate3d(0, -8px, 0);
41}
42
43.line-2 {
44  -webkit-transform: translate3d(0, 0, 0);
45  transform: translate3d(0, 0, 0);
46}
47
48.line-3 {
49  -webkit-transform: translate3d(0, 8px, 0);
50  transform: translate3d(0, 8px, 0);
51}
52
53.menu-open:checked + .menu-open-button .line-1 {
54  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
55  transform: translate3d(0, 0, 0) rotate(45deg);
56}
57
58.menu-open:checked + .menu-open-button .line-2 {
59  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
60  transform: translate3d(0, 0, 0) scale(0.1, 1);
61}
62
63.menu-open:checked + .menu-open-button .line-3 {
64  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
65  transform: translate3d(0, 0, 0) rotate(-45deg);
66}
67
68.menu {
69  margin: auto;
70  position: absolute;
71  top: 0;
72  bottom: 0;
73  left: 0;
74  right: 0;
75  width: 80px;
76  height: 80px;
77  text-align: center;
78  box-sizing: border-box;
79  font-size: 26px;
80}
81
82
83/* .menu-item {
84   transition: all 0.1s ease 0s;
85} */
86
87.menu-item:hover {
88  background: #EEEEEE;
89  color: #3290B1;
90}
91
92.menu-item:nth-child(3) {
93  -webkit-transition-duration: 180ms;
94  transition-duration: 180ms;
95}
96
97.menu-item:nth-child(4) {
98  -webkit-transition-duration: 180ms;
99  transition-duration: 180ms;
100}
101
102.menu-item:nth-child(5) {
103  -webkit-transition-duration: 180ms;
104  transition-duration: 180ms;
105}
106
107.menu-item:nth-child(6) {
108  -webkit-transition-duration: 180ms;
109  transition-duration: 180ms;
110}
111
112.menu-item:nth-child(7) {
113  -webkit-transition-duration: 180ms;
114  transition-duration: 180ms;
115}
116
117.menu-item:nth-child(8) {
118  -webkit-transition-duration: 180ms;
119  transition-duration: 180ms;
120}
121
122.menu-item:nth-child(9) {
123  -webkit-transition-duration: 180ms;
124  transition-duration: 180ms;
125}
126
127.menu-open-button {
128  z-index: 2;
129  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
130  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
131  -webkit-transition-duration: 400ms;
132  transition-duration: 400ms;
133  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
134  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
135  cursor: pointer;
136  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
137}
138
139.menu-open-button:hover {
140  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
141  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
142}
143
144.menu-open:checked + .menu-open-button {
145  -webkit-transition-timing-function: linear;
146  transition-timing-function: linear;
147  -webkit-transition-duration: 200ms;
148  transition-duration: 200ms;
149  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
150  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
151}
152
153.menu-open:checked ~ .menu-item {
154  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
155  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
156}
157
158.menu-open:checked ~ .menu-item:nth-child(3) {
159  transition-duration: 180ms;
160  -webkit-transition-duration: 180ms;
161  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
162  transform: translate3d(0.08361px, -104.99997px, 0);
163}
164
165.menu-open:checked ~ .menu-item:nth-child(4) {
166  transition-duration: 280ms;
167  -webkit-transition-duration: 280ms;
168  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
169  transform: translate3d(90.9466px, -52.47586px, 0);
170}
171
172.menu-open:checked ~ .menu-item:nth-child(5) {
173  transition-duration: 380ms;
174  -webkit-transition-duration: 380ms;
175  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
176  transform: translate3d(90.9466px, 52.47586px, 0);
177}
178
179.menu-open:checked ~ .menu-item:nth-child(6) {
180  transition-duration: 480ms;
181  -webkit-transition-duration: 480ms;
182  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
183  transform: translate3d(0.08361px, 104.99997px, 0);
184}
185
186.menu-open:checked ~ .menu-item:nth-child(7) {
187  transition-duration: 580ms;
188  -webkit-transition-duration: 580ms;
189  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
190  transform: translate3d(-90.86291px, 52.62064px, 0);
191}
192
193.menu-open:checked ~ .menu-item:nth-child(8) {
194  transition-duration: 680ms;
195  -webkit-transition-duration: 680ms;
196  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
197  transform: translate3d(-91.03006px, -52.33095px, 0);
198}
199
200.menu-open:checked ~ .menu-item:nth-child(9) {
201  transition-duration: 780ms;
202  -webkit-transition-duration: 780ms;
203  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
204  transform: translate3d(-0.25084px, -104.9997px, 0);
205}
206
207.blue {
208  background-color: #669AE1;
209  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
210  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
211}
212
213.blue:hover {
214  color: #669AE1;
215  text-shadow: none;
216}
217
218.green {
219  background-color: #70CC72;
220  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
221  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
222}
223
224.green:hover {
225  color: #70CC72;
226  text-shadow: none;
227}
228
229.red {
230  background-color: #FE4365;
231  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
232  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
233}
234
235.red:hover {
236  color: #FE4365;
237  text-shadow: none;
238}
239
240.purple {
241  background-color: #C49CDE;
242  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
243  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
244}
245
246.purple:hover {
247  color: #C49CDE;
248  text-shadow: none;
249}
250
251.orange {
252  background-color: #FC913A;
253  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
254  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
255}
256
257.orange:hover {
258  color: #FC913A;
259  text-shadow: none;
260}
261
262.lightblue {
263  background-color: #62C2E4;
264  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
265  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
266}
267
268.lightblue:hover {
269  color: #62C2E4;
270  text-shadow: none;
271}
272
273.credit {
274  margin: 24px 20px 120px 0;
275  text-align: right;
276  color: #EEEEEE;
277}
278
279.credit a {
280  padding: 8px 0;
281  color: #C49CDE;
282  text-decoration: none;
283  transition: all 0.3s ease 0s;
284}
285
286.credit a:hover {
287  text-decoration: underline;
288}

.menu-item,
.menu-open-button {
  background: #EEEEEE;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  color: #FFFFFF;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.lines {
  width: 25px;
  height: 3px;
  background: #596778;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
}

.line-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}

.line-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.line-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked + .menu-open-button .line-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked + .menu-open-button .line-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
  font-size: 26px;
}


/* .menu-item {
   transition: all 0.1s ease 0s;
} */

.menu-item:hover {
  background: #EEEEEE;
  color: #3290B1;
}

.menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(7) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(8) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(9) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
  transform: translate3d(0.08361px, -104.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 280ms;
  -webkit-transition-duration: 280ms;
  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
  transform: translate3d(90.9466px, -52.47586px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 380ms;
  -webkit-transition-duration: 380ms;
  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
  transform: translate3d(90.9466px, 52.47586px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 480ms;
  -webkit-transition-duration: 480ms;
  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
  transform: translate3d(0.08361px, 104.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 580ms;
  -webkit-transition-duration: 580ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
  transform: translate3d(-90.86291px, 52.62064px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 680ms;
  -webkit-transition-duration: 680ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
  transform: translate3d(-91.03006px, -52.33095px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 780ms;
  -webkit-transition-duration: 780ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
  transform: translate3d(-0.25084px, -104.9997px, 0);
}

.blue {
  background-color: #669AE1;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.blue:hover {
  color: #669AE1;
  text-shadow: none;
}

.green {
  background-color: #70CC72;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.green:hover {
  color: #70CC72;
  text-shadow: none;
}

.red {
  background-color: #FE4365;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.red:hover {
  color: #FE4365;
  text-shadow: none;
}

.purple {
  background-color: #C49CDE;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.purple:hover {
  color: #C49CDE;
  text-shadow: none;
}

.orange {
  background-color: #FC913A;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.orange:hover {
  color: #FC913A;
  text-shadow: none;
}

.lightblue {
  background-color: #62C2E4;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.lightblue:hover {
  color: #62C2E4;
  text-shadow: none;
}

.credit {
  margin: 24px 20px 120px 0;
  text-align: right;
  color: #EEEEEE;
}

.credit a {
  padding: 8px 0;
  color: #C49CDE;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.credit a:hover {
  text-decoration: underline;
}

HTML

1<nav class="menu">
2   <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open">
3   <label class="menu-open-button" for="menu-open">
4    <span class="lines line-1"></span>
5    <span class="lines line-2"></span>
6    <span class="lines line-3"></span>
7  </label>
8
9   <a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
10   <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
11   <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
12   <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
13   <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
14   <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
15</nav>

<nav class="menu">
   <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open">
   <label class="menu-open-button" for="menu-open">
    <span class="lines line-1"></span>
    <span class="lines line-2"></span>
    <span class="lines line-3"></span>
  </label>

   <a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
   <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
   <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
   <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
   <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
   <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav>