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