1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <meta name="google" value="notranslate">
6
7
8 <title>CodePen - Button Hover Effects</title>
9
10
11
12
13
14
15 <style>
16
17 html {
18 padding-top: 50px;
19 font-family: 'Open Sans', Helvetica, arial, sans-serif;
20 text-align: center;
21 background-color: #eeeeee;
22 }
23 html *,
24 html *:before,
25 html *:after {
26 box-sizing: border-box;
27 -webkit-transition: 0.5s;
28 transition: 0.5s;
29 }
30 html i, html em,
31 html b, html strong,
32 html span {
33 -webkit-transition: none;
34 transition: none;
35 }
36
37 *:before,
38 *:after {
39 z-index: -1;
40 }
41
42 h1,
43 h4 {
44 font-family: 'Raleway', 'Open Sans', sans-serif;
45 margin: 0;
46 line-height: 1;
47 }
48
49 a {
50 text-decoration: none;
51 line-height: 80px;
52 color: black;
53 }
54
55 .centerer {
56 width: 100%;
57 max-width: 600px;
58 margin: 0 auto;
59 }
60
61 .wrap {
62 width: 50%;
63 float: left;
64 }
65
66 [class^="btn-"] {
67 position: relative;
68 display: block;
69 margin: 20px auto;
70 width: 100%;
71 height: 80px;
72 max-width: 250px;
73 text-transform: uppercase;
74 overflow: hidden;
75 border: 1px solid currentColor;
76 }
77
78 .btn-0 {
79 color: #925073;
80 }
81 .btn-0:before {
82 content: '';
83 position: absolute;
84 top: 0;
85 left: 0;
86 width: 0;
87 height: 80px;
88 background: #4c1d36;
89 }
90 .btn-0:hover {
91 color: #dfccd6;
92 }
93 .btn-0:hover:before {
94 width: 250px;
95 }
96 .btn-0:active {
97 background: #7f315a;
98 }
99
100 .btn-1 {
101 color: #af4e49;
102 }
103 .btn-1:after {
104 content: '';
105 width: 0;
106 height: 0;
107 -webkit-transform: rotate(360deg);
108 border-style: solid;
109 border-width: 0 0 0 0;
110 border-color: #611c19 transparent transparent transparent;
111 position: absolute;
112 top: 0;
113 left: 0;
114 }
115 .btn-1:hover {
116 color: #e8cbca;
117 }
118 .btn-1:hover:after {
119 border-width: 330px 330px 0 0;
120 }
121 .btn-1:active {
122 background: #a12f29;
123 }
124
125 .btn-1-2 {
126 color: #61cdbe;
127 }
128 .btn-1-2:before {
129 content: '';
130 width: 0;
131 height: 0;
132 -webkit-transform: rotate(360deg);
133 border-style: solid;
134 border-width: 0 0 0 0;
135 border-color: transparent transparent transparent #29766b;
136 position: absolute;
137 bottom: 0;
138 left: 0;
139 }
140 .btn-1-2:after {
141 content: '';
142 width: 0;
143 height: 0;
144 -webkit-transform: rotate(360deg);
145 border-style: solid;
146 border-width: 0 0 0 0;
147 border-color: transparent transparent #29766b transparent;
148 position: absolute;
149 right: 0;
150 bottom: 0;
151 }
152 .btn-1-2:hover {
153 color: #d1f0ec;
154 }
155 .btn-1-2:hover:before {
156 border-width: 206.25px 0 0 206.25px;
157 }
158 .btn-1-2:hover:after {
159 border-width: 0 0 206.25px 206.25px;
160 }
161 .btn-1-2:active {
162 background: #45c4b3;
163 }
164
165 .btn-2 {
166 color: #306570;
167 }
168 .btn-2:before {
169 content: '';
170 width: 0;
171 height: 0;
172 -webkit-transform: rotate(360deg);
173 border-style: solid;
174 border-width: 0 0 0 0;
175 border-color: transparent transparent transparent #072c34;
176 position: absolute;
177 bottom: 0;
178 left: 0;
179 }
180 .btn-2:after {
181 content: '';
182 width: 0;
183 height: 0;
184 -webkit-transform: rotate(360deg);
185 border-style: solid;
186 border-width: 0 0 0 0;
187 border-color: transparent #072c34 transparent transparent;
188 position: absolute;
189 top: 0;
190 right: 0;
191 }
192 .btn-2:hover {
193 color: #c2d2d5;
194 }
195 .btn-2:hover:before {
196 border-width: 165px 0 0 165px;
197 }
198 .btn-2:hover:after {
199 border-width: 0 165px 165px 0;
200 }
201 .btn-2:active {
202 background: #0c4a57;
203 }
204
205 .btn-3 {
206 color: #c45561;
207 }
208 .btn-3:before {
209 content: '';
210 width: 0;
211 height: 0;
212 -webkit-transform: rotate(360deg);
213 border-style: solid;
214 border-width: 0 0 0 0;
215 border-color: transparent transparent transparent #6f2129;
216 position: absolute;
217 bottom: 0;
218 left: 0;
219 }
220 .btn-3:after {
221 content: '';
222 width: 0;
223 height: 0;
224 -webkit-transform: rotate(360deg);
225 border-style: solid;
226 border-width: 0 0 0 0;
227 border-color: transparent #6f2129 transparent transparent;
228 position: absolute;
229 top: 0;
230 right: 0;
231 }
232 .btn-3 span:before {
233 content: '';
234 width: 0;
235 height: 0;
236 -webkit-transform: rotate(360deg);
237 border-style: solid;
238 border-width: 0 0 0 0;
239 border-color: transparent transparent #6f2129 transparent;
240 position: absolute;
241 right: 0;
242 bottom: 0;
243 }
244 .btn-3 span:after {
245 content: '';
246 width: 0;
247 height: 0;
248 -webkit-transform: rotate(360deg);
249 border-style: solid;
250 border-width: 0 0 0 0;
251 border-color: #6f2129 transparent transparent transparent;
252 position: absolute;
253 top: 0;
254 left: 0;
255 }
256 .btn-3:hover {
257 color: #eecdd1;
258 }
259 .btn-3:hover:before {
260 border-width: 165px 0 0 165px;
261 }
262 .btn-3:hover:after {
263 border-width: 0 165px 165px 0;
264 }
265 .btn-3:hover span:before {
266 border-width: 0 0 165px 165px;
267 }
268 .btn-3:hover span:after {
269 border-width: 165px 165px 0 0;
270 }
271 .btn-3:active {
272 background: #b93745;
273 }
274
275 .btn-4 {
276 color: #7d8d5c;
277 }
278 .btn-4:after {
279 content: '';
280 width: 0;
281 height: 0;
282 -webkit-transform: rotate(360deg);
283 border-style: solid;
284 border-width: 0 0 0 0;
285 border-color: transparent #3d4926 transparent transparent;
286 position: absolute;
287 top: 0;
288 right: 0;
289 }
290 .btn-4:before {
291 content: '';
292 width: 0;
293 height: 0;
294 -webkit-transform: rotate(360deg);
295 border-style: solid;
296 border-width: 0 0 0 0;
297 border-color: transparent transparent transparent #3d4926;
298 position: absolute;
299 bottom: 0;
300 left: 0;
301 }
302 .btn-4:before, .btn-4:after {
303 border-color: #3d4926;
304 }
305 .btn-4 span:after {
306 content: '';
307 width: 0;
308 height: 0;
309 -webkit-transform: rotate(360deg);
310 border-style: solid;
311 border-width: 0 0 0 0;
312 border-color: #3d4926 transparent transparent transparent;
313 position: absolute;
314 top: 0;
315 left: 0;
316 }
317 .btn-4 span:before {
318 content: '';
319 width: 0;
320 height: 0;
321 -webkit-transform: rotate(360deg);
322 border-style: solid;
323 border-width: 0 0 0 0;
324 border-color: transparent transparent #3d4926 transparent;
325 position: absolute;
326 right: 0;
327 bottom: 0;
328 }
329 .btn-4 span:before, .btn-4 span:after {
330 border-color: #3d4926;
331 }
332 .btn-4:hover {
333 color: #d9decf;
334 }
335 .btn-4:hover:before {
336 border-width: 20px 62.5px;
337 }
338 .btn-4:hover:after {
339 border-width: 20px 62.5px;
340 }
341 .btn-4:hover span:before {
342 border-width: 20px 62.5px;
343 }
344 .btn-4:hover span:after {
345 border-width: 20px 62.5px;
346 }
347 .btn-4:active {
348 background: #66793f;
349 }
350
351 .btn-5 {
352 color: #2a4770;
353 }
354 .btn-5:after {
355 content: '';
356 width: 0;
357 height: 0;
358 -webkit-transform: rotate(360deg);
359 border-style: solid;
360 border-width: 0 0 0 0;
361 border-color: transparent #021734 transparent transparent;
362 position: absolute;
363 top: 0;
364 right: 0;
365 }
366 .btn-5:before {
367 content: '';
368 width: 0;
369 height: 0;
370 -webkit-transform: rotate(360deg);
371 border-style: solid;
372 border-width: 0 0 0 0;
373 border-color: transparent transparent transparent #021734;
374 position: absolute;
375 bottom: 0;
376 left: 0;
377 }
378 .btn-5:hover {
379 color: #c0c9d5;
380 }
381 .btn-5:hover:before, .btn-5:hover:after {
382 border-width: 80px 262.5px;
383 }
384 .btn-5:active {
385 background: #042757;
386 }
387
388 .btn-6 {
389 color: #a751d0;
390 }
391 .btn-6 span {
392 position: absolute;
393 display: block;
394 width: 0;
395 height: 0;
396 border-radius: 50%;
397 background: #5b1e78;
398 -webkit-transform: translate(-50%, -50%);
399 transform: translate(-50%, -50%);
400 -webkit-transition: width 0.4s, height 0.4s;
401 transition: width 0.4s, height 0.4s;
402 z-index: -1;
403 }
404 .btn-6:hover {
405 color: #e5ccf1;
406 }
407 .btn-6:hover span {
408 width: 562.5px;
409 height: 562.5px;
410 }
411 .btn-6:active {
412 background: #9832c8;
413 }
414
415 .btn-7 {
416 color: #41c46a;
417 }
418 .btn-7:before, .btn-7:after,
419 .btn-7 span:before,
420 .btn-7 span:after {
421 content: '';
422 position: absolute;
423 top: 0;
424 width: 63.5px;
425 height: 0;
426 background: #136f30;
427 }
428 .btn-7:before {
429 left: 0;
430 }
431 .btn-7:after {
432 left: 125px;
433 }
434 .btn-7 span:before, .btn-7 span:after {
435 top: auto;
436 bottom: 0;
437 }
438 .btn-7 span:before {
439 left: 62.5px;
440 }
441 .btn-7 span:after {
442 left: 187.5px;
443 }
444 .btn-7:hover {
445 color: #c7eed3;
446 }
447 .btn-7:hover:before, .btn-7:hover:after,
448 .btn-7:hover span:before,
449 .btn-7:hover span:after {
450 height: 80px;
451 }
452 .btn-7:active {
453 background: #1fb950;
454 }
455
456 .btn-8 {
457 color: #377660;
458 }
459 .btn-8:before, .btn-8:after {
460 content: '';
461 position: absolute;
462 top: 0;
463 left: 0;
464 width: 250px;
465 height: 0;
466 background: #0c3829;
467 }
468 .btn-8:after {
469 top: auto;
470 bottom: 0;
471 }
472 .btn-8:hover {
473 color: #c4d7d0;
474 }
475 .btn-8:hover:before, .btn-8:hover:after {
476 height: 40px;
477 }
478 .btn-8:active {
479 background: #145e44;
480 }
481
482 .btn-9 {
483 color: #9b5097;
484 }
485 .btn-9:before, .btn-9:after,
486 .btn-9 span:before,
487 .btn-9 span:after {
488 content: '';
489 position: absolute;
490 top: 0;
491 left: 0;
492 width: 250px;
493 height: 0;
494 background: rgba(82, 29, 80, 0.25);
495 -webkit-transition: 0.4s;
496 transition: 0.4s;
497 }
498 .btn-9:after,
499 .btn-9 span:before {
500 top: auto;
501 bottom: 0;
502 }
503 .btn-9 span:before,
504 .btn-9 span:after {
505 -webkit-transition-delay: 0.4s;
506 transition-delay: 0.4s;
507 }
508 .btn-9:hover {
509 color: #e2cce1;
510 }
511 .btn-9:hover:before, .btn-9:hover:after,
512 .btn-9:hover span:before,
513 .btn-9:hover span:after {
514 height: 80px;
515 }
516 .btn-9:active {
517 background: #893185;
518 }
519
520 .btn-10 {
521 color: #4ab36a;
522 }
523 .btn-10:before, .btn-10:after,
524 .btn-10 span:before,
525 .btn-10 span:after {
526 content: '';
527 position: absolute;
528 top: 0;
529 left: 0;
530 width: 0;
531 height: 80px;
532 background: rgba(25, 99, 48, 0.25);
533 -webkit-transition: 0.4s;
534 transition: 0.4s;
535 }
536 .btn-10:after,
537 .btn-10 span:before {
538 left: auto;
539 right: 0;
540 }
541 .btn-10 span:before,
542 .btn-10 span:after {
543 -webkit-transition-delay: 0.4s;
544 transition-delay: 0.4s;
545 }
546 .btn-10:hover {
547 color: #cae9d3;
548 }
549 .btn-10:hover:before, .btn-10:hover:after,
550 .btn-10:hover span:before,
551 .btn-10:hover span:after {
552 width: 250px;
553 }
554 .btn-10:active {
555 background: #2aa550;
556 }
557
558 @-webkit-keyframes criss-cross-left {
559 0% {
560 left: -20px;
561 }
562 50% {
563 left: 50%;
564 width: 20px;
565 height: 20px;
566 }
567 100% {
568 left: 50%;
569 width: 375px;
570 height: 375px;
571 }
572 }
573
574 @keyframes criss-cross-left {
575 0% {
576 left: -20px;
577 }
578 50% {
579 left: 50%;
580 width: 20px;
581 height: 20px;
582 }
583 100% {
584 left: 50%;
585 width: 375px;
586 height: 375px;
587 }
588 }
589 @-webkit-keyframes criss-cross-right {
590 0% {
591 right: -20px;
592 }
593 50% {
594 right: 50%;
595 width: 20px;
596 height: 20px;
597 }
598 100% {
599 right: 50%;
600 width: 375px;
601 height: 375px;
602 }
603 }
604 @keyframes criss-cross-right {
605 0% {
606 right: -20px;
607 }
608 50% {
609 right: 50%;
610 width: 20px;
611 height: 20px;
612 }
613 100% {
614 right: 50%;
615 width: 375px;
616 height: 375px;
617 }
618 }
619 .btn-11 {
620 position: relative;
621 color: #9248bc;
622 }
623 .btn-11:before, .btn-11:after {
624 position: absolute;
625 top: 50%;
626 content: '';
627 width: 20px;
628 height: 20px;
629 background: #7f28b0;
630 border-radius: 50%;
631 }
632 .btn-11:before {
633 left: -20px;
634 -webkit-transform: translate(-50%, -50%);
635 transform: translate(-50%, -50%);
636 /* animation: criss-cross-left 0.8s reverse; */
637 }
638 .btn-11:after {
639 right: -20px;
640 -webkit-transform: translate(50%, -50%);
641 transform: translate(50%, -50%);
642 /* animation: criss-cross-right 0.8s reverse; */
643 }
644 .btn-11:hover:before, .btn-11:hover:after {
645 /* @include size($btn-width); */
646 }
647 .btn-11:hover:before {
648 -webkit-animation: criss-cross-left 0.8s both;
649 animation: criss-cross-left 0.8s both;
650 }
651 .btn-11:hover:after {
652 -webkit-animation: criss-cross-right 0.8s both;
653 animation: criss-cross-right 0.8s both;
654 }
655
656 </style>
657
658
659
660 </head>
661
662 <body>
663
664 <div class="centerer">
665 <h1>Just Some More</h1>
666 <h1>Button Hover Effects</h1>
667 <h4>By: <a href="http://kylebrumm.com">Kyle Brumm</a></h4>
668
669 <div class="wrap">
670 <a class="btn-0" href="#">Swipe</a>
671 <a class="btn-1" href="#">Diagonal Swipe</a>
672 <a class="btn-1-2" href="#">Double Swipe</a>
673 <a class="btn-2" href="#">Diagonal Close</a>
674 <a class="btn-3" href="#"><span>Zoning In</span></a>
675 <a class="btn-4" href="#"><span>4 Corners</span></a>
676 <a class="btn-5" href="#">Slice</a>
677 </div>
678 <div class="wrap">
679 <a class="btn-6" href="#">Position Aware<span></span></a>
680 <a class="btn-7" href="#"><span>Alternate</span></a>
681 <a class="btn-8" href="#">Smoosh</a>
682 <a class="btn-9" href="#"><span>Vertical Overlap</span></a>
683 <a class="btn-10" href="#"><span>Horizontal Overlap</span></a>
684 <a class="btn-11" href="#">Collision</a>
685 </div>
686 </div>
687
688
689 <script src='http://zaole.net/sliding.js'></script>
690
691 <script>
692 $(function () {
693 $('.btn-6').on('mouseenter', function (e) {
694 var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top;
695 $(this).find('span').css({
696 top: relY,
697 left: relX
698 });
699 }).on('mouseout', function (e) {
700 var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top;
701 $(this).find('span').css({
702 top: relY,
703 left: relX
704 });
705 });
706 $('[href=#]').click(function () {
707 return false;
708 });
709 });
710 //@ sourceURL=pen.js
711 </script>
712
713
714 <script>
715 if (document.location.search.match(/type=embed/gi)) {
716 window.parent.postMessage("resize", "*");
717 }
718 </script>
719
720
721 </body>
722 </html>
