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