Button by Leoodaviid
#212121
1button { 2 position: relative; 3 overflow: hidden; 4 padding: 1rem 2.5rem 1rem 2.5rem; 5 border: 0; 6 border-radius: 2rem; 7 font-size: 18px; 8 font-weight: 500; 9 background: transparent; 10 color: #1d1d1d; 11} 12 13button:hover { 14 cursor: wait; 15} 16 17button > p { 18 position: relative; 19 z-index: 3; 20} 21 22button::before, 23button::after { 24 content: ""; 25 position: absolute; 26 top: 0; 27 left: -100%; 28 width: 300%; 29 height: 100%; 30 opacity: 0; 31} 32 33button::before { 34 background: #79efff repeating-linear-gradient(50deg, transparent, transparent 10px, #71e0ef 10px, #71e0ef 20px); 35} 36 37button::after { 38 z-index: 2; 39 background: linear-gradient(#79efff 30%, transparent 100%); 40} 41 42button.loading::before, 43button.loading::after { 44 opacity: 1; 45} 46 47@keyframes loading_49100 { 48 0% { 49 translate: 25px 0; 50 } 51 52 100% { 53 translate: -30px 0; 54 } 55} 56 57button.loading::before { 58 animation: loading_49100 0.6s infinite linear; 59}
592 views
592 views
MIT License