Button by KSAplay
#212121
1.container { 2 transition: 200ms ease; 3} 4 5.button { 6 position: relative; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 padding: 10px 40px; 11 border-width: 0; 12 border-radius: 1em; 13 background-color: #19171C; 14 transition: 500ms ease; 15} 16 17.button p { 18 font-size: 20px; 19 font-weight: bold; 20 background: rgb(137,60,21); 21 background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%); 22 -webkit-background-clip: text; 23 -webkit-text-fill-color: transparent; 24} 25 26.button::before { 27 position: absolute; 28 content: ''; 29 width: 190px; 30 height: 50px; 31 border-radius: 1em; 32 background-size: 100%; 33 background: rgb(137,60,21); 34 background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%); 35 z-index: -1; 36} 37 38.container:hover .button::before { 39 animation: golden 5s infinite alternate ease-in-out; 40} 41 42.container:hover .button p { 43 animation: golden 5s infinite alternate ease-in-out; 44} 45 46.container:hover { 47 transform: scale(1.1); 48} 49 50.container:active { 51 transform: scale(1); 52} 53 54.container:active .button::before { 55 animation: golden 1s infinite alternate ease-in-out; 56} 57 58.container:active .button p { 59 animation: golden 1s infinite alternate ease-in-out; 60} 61 62@keyframes golden { 63 0% { 64 background-size: 100%; 65 background-position: 50%; 66 } 67 68 50% { 69 background-size: 500%; 70 background-position: 0%; 71 } 72 73 100% { 74 background-size: 200%; 75 background-position: 100%; 76 } 77}
930 views
930 views
MIT License