1.7K views
CSSAdd prefixes
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}
HTML
1<button>Button 2 <div class="star-1"> 3 <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg> 4 </div> 5 <div class="star-2"> 6 <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg> 7 </div> 8 <div class="star-3"> 9 <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg> 10 </div> 11 <div class="star-4"> 12 <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg> 13 </div> 14 <div class="star-5"> 15 <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg> 16 </div> 17 <div class="star-6"> 18 <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" class="fil0"></path></g></svg> 19 </div> 20</button>