Button by gharsh11032000
#e8e8e8
1.button { 2 position: relative; 3 border: none; 4 background-color: white; 5 color: #212121; 6 padding: 20px; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 font-size: 20px; 11 font-weight: 600; 12 gap: 10px; 13 border-radius: 10px; 14 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 15 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 16 cursor: pointer; 17 overflow: hidden; 18} 19 20.button span { 21 position: relative; 22 display: flex; 23 align-items: center; 24 justify-content: center; 25 z-index: 1; 26} 27 28.button::before { 29 content: ""; 30 position: absolute; 31 background-color: palevioletred; 32 width: 100%; 33 height: 100%; 34 left: 0%; 35 bottom: 0%; 36 transform: translate(-100%, 100%); 37 border-radius: inherit; 38} 39 40.button svg { 41 fill: palevioletred; 42 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 43} 44 45.button:hover::before { 46 animation: shakeBack 0.6s forwards; 47} 48 49.button:hover svg { 50 fill: white; 51 scale: 1.3; 52} 53 54.button:active { 55 box-shadow: none; 56} 57 58@keyframes shakeBack { 59 0% { 60 transform: translate(-100%, 100%); 61 } 62 63 50% { 64 transform: translate(20%, -20%); 65 } 66 67 100% { 68 transform: translate(0%, 0%); 69 } 70} 71
2.1K views
2.1K views
MIT License