Button by Peary74
#212121
1button { 2 background: linear-gradient(45deg, transparent 27%, #fd1853 5%, #fd1853 73%, transparent 27%); 3 box-shadow: 6px 0px 0px #00e6f6; 4 position: relative; 5 padding: 12px 35px; 6 font-size: 20px; 7 font-weight: 500; 8 color: white; 9 border: 3px solid #00e6f6; 10 border-radius: 8px; 11 box-shadow: 0 0 0 #fec1958c; 12 transition: all .3s ease-in-out; 13} 14 15.star-1 { 16 position: absolute; 17 top: 20%; 18 left: 20%; 19 width: 25px; 20 height: auto; 21 filter: drop-shadow(0 0 0 #fd1853); 22 z-index: -5; 23 transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); 24} 25 26.star-2 { 27 position: absolute; 28 top: 45%; 29 left: 45%; 30 width: 15px; 31 height: auto; 32 filter: drop-shadow(0 0 0 #fd1853); 33 z-index: -5; 34 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 35} 36 37.star-3 { 38 position: absolute; 39 top: 40%; 40 left: 40%; 41 width: 5px; 42 height: auto; 43 filter: drop-shadow(0 0 0 #fd1853); 44 z-index: -5; 45 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 46} 47 48.star-4 { 49 position: absolute; 50 top: 20%; 51 left: 40%; 52 width: 8px; 53 height: auto; 54 filter: drop-shadow(0 0 0 #fd1853); 55 z-index: -5; 56 transition: all .8s cubic-bezier(0, 0.4, 0, 1.01); 57} 58 59.star-5 { 60 position: absolute; 61 top: 25%; 62 left: 45%; 63 width: 15px; 64 height: auto; 65 filter: drop-shadow(0 0 0 #fd1853); 66 z-index: -5; 67 transition: all .6s cubic-bezier(0, 0.4, 0, 1.01); 68} 69 70.star-6 { 71 position: absolute; 72 top: 5%; 73 left: 50%; 74 width: 5px; 75 height: auto; 76 filter: drop-shadow(0 0 0 #fd1853); 77 z-index: -5; 78 transition: all .8s ease; 79} 80 81button:hover { 82 background: transparent; 83 color: #00e6f6; 84 box-shadow: 0 0 50px #fd1853; 85} 86 87button:hover .star-1 { 88 position: absolute; 89 top: -80%; 90 left: -30%; 91 width: 25px; 92 height: auto; 93 filter: drop-shadow(0 0 10px #fd1853); 94 z-index: 2; 95} 96 97button:hover .star-2 { 98 position: absolute; 99 top: -25%; 100 left: 10%; 101 width: 15px; 102 height: auto; 103 filter: drop-shadow(0 0 10px #fd1853); 104 z-index: 2; 105} 106 107button:hover .star-3 { 108 position: absolute; 109 top: 55%; 110 left: 25%; 111 width: 5px; 112 height: auto; 113 filter: drop-shadow(0 0 10px #fd1853); 114 z-index: 2; 115} 116 117button:hover .star-4 { 118 position: absolute; 119 top: 30%; 120 left: 80%; 121 width: 8px; 122 height: auto; 123 filter: drop-shadow(0 0 10px #fd1853); 124 z-index: 2; 125} 126 127button:hover .star-5 { 128 position: absolute; 129 top: 25%; 130 left: 115%; 131 width: 15px; 132 height: auto; 133 filter: drop-shadow(0 0 10px #fd1853); 134 z-index: 2; 135} 136 137button:hover .star-6 { 138 position: absolute; 139 top: 5%; 140 left: 60%; 141 width: 5px; 142 height: auto; 143 filter: drop-shadow(0 0 10px #fd1853); 144 z-index: 2; 145} 146 147.fil0 { 148 fill: #fd1853 149}
1.2K views
1.2K views
MIT License