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