Button by kennyotsu-monochromia
#212121
1.button { 2 --black: #000000; 3 --ch-black: #141414; 4 --eer-black: #1b1b1b; 5 --night-rider: #2e2e2e; 6 --white: #ffffff; 7 --af-white: #f3f3f3; 8 --ch-white: #e1e1e1; 9 border-radius: 8px; 10 width: 140px; 11 height: 40px; 12 display: flex; 13 align-items: center; 14 justify-content: center; 15 gap: 10px; 16 padding: 0px 15px; 17 border: none; 18 color: white; 19 position: relative; 20 cursor: pointer; 21 font-weight: 700; 22 transition-duration: .2s; 23 background-color: var(--ch-black); 24} 25 26.button:before, .button:after { 27 content: ''; 28 position: absolute; 29 left: -2px; 30 top: -2px; 31 border-radius: 10px; 32 background: linear-gradient(45deg, 33 var(--ch-black), var(--eer-black), 34 var(--night-rider), var(--ch-white), var(--night-rider), 35 var(--eer-black), var(--ch-black),var(--ch-black)); 36 background-size: 400%; 37 width: calc(100% + 4px); 38 height: calc(100% + 4px); 39 z-index: -1; 40 animation: steam 20s linear infinite; 41} 42 43@keyframes steam { 44 0% { 45 background-position: 0 0; 46 } 47 48 50% { 49 background-position: 400% 0; 50 } 51 52 100% { 53 background-position: 0 0; 54 } 55} 56 57.button:after { 58 filter: blur(50px); 59} 60 61
1.8K views
Variation of abutton
MIT License