Card by JaydipPrajapati1910
#212121
1.card { 2 width: 190px; 3 height: 254px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 gap: 10px; 8 padding: 0px 15px; 9 background-color: red; 10 border-radius: 10px; 11 border: none; 12 color: white; 13 position: relative; 14 cursor: pointer; 15 font-weight: 900; 16 transition-duration: .2s; 17 background: linear-gradient(0deg, #000, #272727); 18} 19 20.card:before, .card:after { 21 content: ''; 22 position: absolute; 23 left: -2px; 24 top: -2px; 25 border-radius: 10px; 26 background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 27 #0000ff, #00ff00,#ffff00, #ff0000); 28 background-size: 400%; 29 width: calc(100% + 4px); 30 height: calc(100% + 4px); 31 z-index: -1; 32 animation: steam 20s linear infinite; 33} 34 35@keyframes steam { 36 0% { 37 background-position: 0 0; 38 } 39 40 50% { 41 background-position: 400% 0; 42 } 43 44 100% { 45 background-position: 0 0; 46 } 47} 48 49.card:after { 50 filter: blur(100px); 51} 52 53
2.4K views
2.4K views
MIT License