Button by misaraadel
#e8e8e8
1.custom-btn { 2 width: 220px; 3 height: 50px; 4 display: flex; 5 align-items: center; 6 align-content: center; 7 justify-content: center; 8 position: relative; 9 z-index: 9; 10 border: 1px solid #5BA50E; 11 gap: 10px; 12 text-decoration: none; 13 background-color: #5BA50E; 14} 15 16.custom-btn::after { 17 content: ""; 18 position: absolute; 19 width: 100%; 20 height: 100%; 21 -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%); 22 clip-path: polygon(0 0, 100% 0, 0 0, 0 100%); 23 z-index: -1; 24 background-color: #fff; 25 top: 0; 26 left: 0; 27 opacity: 0; 28} 29 30.custom-btn span { 31 font-size: 16px; 32 font-weight: 700; 33 color: #fff; 34} 35 36.custom-btn:hover::after { 37 animation: sideClip 0.5s linear; 38 -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 39 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 40 opacity: 1; 41} 42 43.custom-btn:hover span { 44 animation: storm 0.4s linear both; 45 color: #5BA50E; 46} 47 48@keyframes sideClip { 49 0% { 50 clip-path: polygon(0 0, 100% 0, 0 0, 0 100%); 51 } 52 53 50% { 54 clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%); 55 } 56 57 100% { 58 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 59 } 60} 61 62@keyframes storm { 63 0% { 64 transform: translate3d(0, 0, 0) translateZ(0); 65 } 66 67 25% { 68 transform: translate3d(4px, 0, 0) translateZ(0); 69 } 70 71 50% { 72 transform: translate3d(-3px, 0, 0) translateZ(0); 73 } 74 75 75% { 76 transform: translate3d(2px, 0, 0) translateZ(0); 77 } 78 79 100% { 80 transform: translate3d(0, 0, 0) translateZ(0); 81 } 82}
340 views
340 views
MIT License