Button by SmookyDev
#212121
1a { 2 position: relative; 3 width: 160px; 4 height: 50px; 5 line-height: 48px; 6 background: #000; 7 text-transform: uppercase; 8 font-weight: bolder; 9 font-size: 25px; 10 text-align: center; 11 letter-spacing: 0.1em; 12 text-decoration: none; 13 transition: 0.5s; 14 -webkit-box-reflect: below 1px linear-gradient(transparent, #0004); 15} 16 17a span { 18 position: absolute; 19 display: block; 20 top: 1px; 21 left: 1px; 22 right: 1px; 23 bottom: 1px; 24 text-align: center; 25 background: #0c0c0c; 26 color: rgba(255, 255, 255, 0.2); 27 transition: 0.5s; 28} 29 30a:hover span { 31 color: rgba(255, 255, 255, 1); 32} 33 34a span::before { 35 content: ""; 36 position: absolute; 37 top: 0; 38 left: 0; 39 width: 100%; 40 height: 50%; 41 background: rgba(255, 255, 255, 0.1); 42 z-index: 10; 43} 44 45a::before { 46 content: ""; 47 position: absolute; 48 top: 0; 49 left: 0; 50 width: 100%; 51 height: 100%; 52 background: linear-gradient( 53 45deg, 54 #c0392b, 55 #f39c12, 56 #f1c40f, 57 #2ecc71, 58 #3498db, 59 #2980b9, 60 #9b59b6, 61 #8e44ad, 62 #c0392b, 63 #f39c12, 64 #f1c40f, 65 #2ecc71, 66 #3498db, 67 #2980b9, 68 #9b59b6, 69 #8e44ad 70 ); 71 background-size: 400%; 72 opacity: 0; 73 transition: 2.5 s; 74 animation: eff 20s linear infinite; 75} 76 77a:hover::before, 78a:hover::after { 79 opacity: 1; 80} 81 82a::after { 83 content: ""; 84 position: absolute; 85 top: 0; 86 left: 0; 87 width: 100%; 88 height: 100%; 89 background: linear-gradient( 90 45deg, 91 #c0392b, 92 #f39c12, 93 #f1c40f, 94 #2ecc71, 95 #3498db, 96 #2980b9, 97 #9b59b6, 98 #8e44ad, 99 #c0392b, 100 #f39c12, 101 #f1c40f, 102 #2ecc71, 103 #3498db, 104 #2980b9, 105 #9b59b6, 106 #8e44ad 107 ); 108 background-size: 400%; 109 opacity: 0; 110 filter: blur(20px); 111 transition: 0.5s; 112 animation: eff 20s ease infinite; 113} 114 115@keyframes eff { 116 0% { 117 background-position: 0 0; 118 } 119 50% { 120 background-position: 400% 0; 121 } 122 100% { 123 background-position: 0 0; 124 } 125} 126
333 views
333 views
MIT License