#e8e8e8
1button { 2 position: relative; 3 padding: 15px 45px; 4 background: #FEC195; 5 font-size: 17px; 6 font-weight: 500; 7 color: #181818; 8 border: 1px solid #FEC195; 9 border-radius: 8px; 10 filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2)); 11} 12 13button:hover { 14 border: 1px solid #f3b182; 15 background: linear-gradient(85deg, #FEC195, #fcc196, #fabd92, #fac097, #fac39c); 16 animation: wind 2s ease-in-out infinite; 17} 18 19@keyframes wind { 20 0% { 21 background-position: 0% 50%; 22 } 23 24 0% { 25 background-position: 50% 100%; 26 } 27 28 0% { 29 background-position: 0% 50%; 30 } 31} 32 33.icon-1 { 34 position: absolute; 35 top: 0; 36 right: 0; 37 width: 25px; 38 transform-origin: 0 0; 39 transform: rotate(10deg); 40 transition: all .5s ease-in-out; 41 filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .3)); 42} 43 44button:hover .icon-1 { 45 animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite; 46 transform: rotate(10deg); 47} 48 49@keyframes slay-1 { 50 0% { 51 transform: rotate(10deg); 52 } 53 54 50% { 55 transform: rotate(-5deg); 56 } 57 58 100% { 59 transform: rotate(10deg); 60 } 61} 62 63.icon-2 { 64 position: absolute; 65 top: 0; 66 left: 25px; 67 width: 12px; 68 transform-origin: 50% 0; 69 transform: rotate(10deg); 70 transition: all 1s ease-in-out; 71 filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5)); 72} 73 74button:hover .icon-2 { 75 animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite; 76 transform: rotate(0); 77} 78 79@keyframes slay-2 { 80 0% { 81 transform: rotate(0deg); 82 } 83 84 50% { 85 transform: rotate(15deg); 86 } 87 88 100% { 89 transform: rotate(0); 90 } 91} 92 93.icon-3 { 94 position: absolute; 95 top: 0; 96 left: 0; 97 width: 18px; 98 transform-origin: 50% 0; 99 transform: rotate(-5deg); 100 transition: all 1s ease-in-out; 101 filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5)); 102} 103 104button:hover .icon-3 { 105 animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite; 106 transform: rotate(0); 107} 108 109@keyframes slay-3 { 110 0% { 111 transform: rotate(0deg); 112 } 113 114 50% { 115 transform: rotate(-5deg); 116 } 117 118 100% { 119 transform: rotate(0); 120 } 121}
12K views
12K views
Comments
MIT License