Button by Tsiangana
#e8e8e8
1button { 2 position: relative; 3 padding: 12px 35px; 4 background: #fec195; 5 font-size: 17px; 6 font-weight: 600; 7 color: #fff; 8 border: 3px solid #fec195; 9 border-radius: 19px; 10 box-shadow: 0 0 0 #fec1958c; 11 transition: all 0.3s ease-in-out; 12 cursor: pointer; 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 #fffdef); 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 #fffdef); 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 #fffdef); 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 #fffdef); 55 z-index: -5; 56 transition: all 0.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 #fffdef); 66 z-index: -5; 67 transition: all 0.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 #fffdef); 77 z-index: -5; 78 transition: all 0.8s ease; 79} 80 81button:hover { 82 background: transparent; 83 color: #fec195; 84 box-shadow: 0 0 25px #fec1958c; 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 #fffdef); 94 z-index: 2; 95} 96 97button:hover .star-2 { 98 position: absolute; 99 top: -40%; 100 left: 16%; 101 width: 15px; 102 height: auto; 103 filter: drop-shadow(0 0 10px #fffdef); 104 z-index: 2; 105} 106 107button:hover .star-3 { 108 position: absolute; 109 top: 95%; 110 left: 2%; 111 width: 5px; 112 height: auto; 113 filter: drop-shadow(0 0 10px #fffdef); 114 z-index: 2; 115} 116 117button:hover .star-4 { 118 position: absolute; 119 top: -70%; 120 left: 75%; 121 width: 8px; 122 height: auto; 123 filter: drop-shadow(0 0 10px #fffdef); 124 z-index: 2; 125} 126 127button:hover .star-5 { 128 position: absolute; 129 top: 35%; 130 left: 115%; 131 width: 15px; 132 height: auto; 133 filter: drop-shadow(0 0 10px #fffdef); 134 z-index: 2; 135} 136 137button:hover .star-6 { 138 position: absolute; 139 top: 75%; 140 left: 60%; 141 width: 5px; 142 height: auto; 143 filter: drop-shadow(0 0 10px #fffdef); 144 z-index: 2; 145} 146 147.fil0 { 148 fill: #fffdef; 149} 150
369 views
369 views
Variations
1 MIT License