This post is saved as a draft.
#e8e8e8
1.button * { 2 cursor: pointer; 3} 4 5.button { 6 position: relative; 7 width: 160px; 8 height: 50px; 9 background: none; 10 border-radius: 8px; 11 outline: none; 12 font-size: 19px; 13 font-family: "Montserrat", sans-serif; 14 overflow: hidden; 15 box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; 16 text-decoration: none; 17 border: none; 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 transition: all 0.4s; 22} 23 24.button::before { 25 content: ''; 26 position: absolute; 27 width: 200%; 28 height: 100%; 29 background-image: linear-gradient(to right, #AF40FF, #5B42F3, #006eeb, #42a0f3, #AF40FF); 30 background-size: 200% 100%; 31 background-position: 100% 0; 32 animation: moveGradient 3s linear infinite; 33 z-index: -1; 34} 35 36.inner-circle { 37 position: absolute; 38 width: 94%; 39 height: 84%; 40 background-color: rgb(2, 3, 20); 41 border-radius: 6px; 42 opacity: 1; 43 transition: opacity 0.2s; 44} 45 46.text { 47 z-index: 3; 48 color: white; 49 cursor: pointer; 50} 51 52@keyframes moveGradient { 53 0% { 54 background-position: 100% 0; 55 } 56 57 100% { 58 background-position: -100% 0; 59 } 60} 61 62.button:active { 63 transform: scale(0.9); 64}
Variation of abutton
Variation of abutton