Button by faxriddin20
#e8e8e8
1.btn { 2 height: 4em; 3 width: 12em; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 background: transparent; 8 border: 0px solid black; 9 cursor: pointer; 10 font-family: sans-serif; 11 font-weight: bold; 12} 13 14.wrapper { 15 height: 2em; 16 width: 8em; 17 position: relative; 18 background: transparent; 19 display: flex; 20 justify-content: center; 21 align-items: center; 22} 23 24.text { 25 font-size: 17px; 26 z-index: 1; 27 color: #000; 28 padding: 4px 12px; 29 border-radius: 4px; 30 background: rgba(255, 255, 255, 0.7); 31 transition: none 0.5s; 32} 33 34.flower { 35 display: grid; 36 grid-template-columns: 1em 1em; 37 position: absolute; 38 transition: none 0.5s; 39} 40 41.flower1 { 42 top: -12px; 43 left: -13px; 44 transform: rotate(5deg); 45} 46 47.flower2 { 48 bottom: -5px; 49 left: 8px; 50 transform: rotate(35deg); 51} 52 53.flower3 { 54 bottom: -15px; 55 transform: rotate(0deg); 56} 57 58.flower4 { 59 top: -14px; 60 transform: rotate(15deg); 61} 62 63.flower5 { 64 right: 11px; 65 top: -3px; 66 transform: rotate(25deg); 67} 68 69.flower6 { 70 right: -15px; 71 bottom: -15px; 72 transform: rotate(30deg); 73} 74 75.petal { 76 height: 1em; 77 width: 1em; 78 border-radius: 40% 70% / 7% 90%; 79 background: violet; 80 border: 0.5px solid purple; 81 z-index: 0; 82 transition: width 0.4s, height 0.4s step-start; 83} 84 85.two { 86 transform: rotate(90deg); 87} 88 89.three { 90 transform: rotate(270deg); 91} 92 93.four { 94 transform: rotate(180deg); 95} 96 97.btn:hover .petal { 98 background: violet; 99 border: 0.5px solid purple; 100} 101 102.btn:hover .flower { 103 grid-template-columns: 1.5em 1.5em; 104} 105 106.btn:hover .flower .petal { 107 width: 1.5em; 108 height: 1.5em; 109} 110 111.btn:hover .text { 112 background: rgba(255, 255, 255, 0.4); 113} 114 115.btn:hover div.flower1 { 116 animation: 15s linear 0s normal none infinite running flower1; 117} 118 119@keyframes flower1 { 120 0% { 121 transform: rotate(5deg); 122 } 123 124 100% { 125 transform: rotate(365deg); 126 } 127} 128 129.btn:hover div.flower2 { 130 animation: 13s linear 1s normal none infinite running flower2; 131} 132 133@keyframes flower2 { 134 0% { 135 transform: rotate(35deg); 136 } 137 138 100% { 139 transform: rotate(-325deg); 140 } 141} 142 143.btn:hover div.flower3 { 144 animation: 16s linear 1s normal none infinite running flower3; 145} 146 147@keyframes flower3 { 148 0% { 149 transform: rotate(0deg); 150 } 151 152 100% { 153 transform: rotate(360deg); 154 } 155} 156 157.btn:hover div.flower4 { 158 animation: 17s linear 1s normal none infinite running flower4; 159} 160 161@keyframes flower4 { 162 0% { 163 transform: rotate(15deg); 164 } 165 166 100% { 167 transform: rotate(375deg); 168 } 169} 170 171.btn:hover div.flower5 { 172 animation: 20s linear 1s normal none infinite running flower5; 173} 174 175@keyframes flower5 { 176 0% { 177 transform: rotate(25deg); 178 } 179 180 100% { 181 transform: rotate(-335deg); 182 } 183} 184 185.btn:hover div.flower6 { 186 animation: 15s linear 1s normal none infinite running flower6; 187} 188 189@keyframes flower6 { 190 0% { 191 transform: rotate(30deg); 192 } 193 194 100% { 195 transform: rotate(390deg); 196 } 197} 198
230 views
Variation of abutton
MIT License