Button by kalp-lathia
#e8e8e8
1.button { 2 --bg-color: rgb(0, 119, 255); 3 --color: white; 4 --border-radius: 1rem; 5 --animation-duaration: 1s; 6 --height: 4rem; 7 --span-width: 1.5rem; 8 --base-pos: 0rem; 9 --final-pos: -2rem 10} 11 12.button, .left, .right { 13 height: var(--height); 14 background-color: var(--bg-color); 15 transition: all var(--animation-duaration) ease-in-out; 16} 17 18.button { 19 position: relative; 20 font-size: 1rem; 21 padding: 0rem 2.5rem; 22 color: var(--color); 23 border: none; 24 border-radius: var(--border-radius); 25 cursor: pointer; 26} 27 28.left, .right { 29 width: var(--span-width); 30 position: absolute; 31 top: 0rem; 32} 33 34.left { 35 left: var(--base-pos); 36 border-radius: var(--border-radius) 0rem 0rem var(--border-radius); 37} 38 39.right { 40 right: var(--base-pos); 41 border-radius: 0rem var(--border-radius) var(--border-radius) 0rem; 42} 43 44.button:hover { 45 animation: button-radius var(--animation-duaration) infinite ease-in-out; 46} 47 48.button:hover .left { 49 animation: left-shake var(--animation-duaration) infinite ease-in-out; 50} 51 52.button:hover .right { 53 animation: right-shake var(--animation-duaration) infinite ease-in-out; 54} 55 56@keyframes button-radius { 57 0% { 58 border-radius: var(--border-radius); 59 } 60 61 50% { 62 border-radius: 0rem; 63 } 64 65 100% { 66 border-radius: var(--border-radius); 67 } 68} 69 70@keyframes left-shake { 71 0% { 72 left: var(--base-pos); 73 } 74 75 50% { 76 left: var(--final-pos); 77 } 78 79 100% { 80 left: var(--base-pos); 81 } 82} 83 84@keyframes right-shake { 85 0% { 86 right: var(--base-pos); 87 } 88 89 50% { 90 right: var(--final-pos); 91 } 92 93 100% { 94 right: var(--base-pos); 95 } 96}
448 views
448 views
MIT License