#212121
1.button { 2 position: relative; 3 width: 120px; 4 height: 40px; 5 background-color: #000; 6 display: flex; 7 align-items: center; 8 color: white; 9 flex-direction: column; 10 justify-content: center; 11 border: none; 12 padding: 12px; 13 gap: 12px; 14 border-radius: 8px; 15 cursor: pointer; 16} 17 18.button::before { 19 content: ''; 20 position: absolute; 21 inset: 0; 22 left: -4px; 23 top: -1px; 24 margin: auto; 25 width: 128px; 26 height: 48px; 27 border-radius: 10px; 28 background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% ); 29 z-index: -10; 30 pointer-events: none; 31 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 32} 33 34.button::after { 35 content: ""; 36 z-index: -1; 37 position: absolute; 38 inset: 0; 39 background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% ); 40 transform: translate3d(0, 0, 0) scale(0.95); 41 filter: blur(20px); 42} 43 44.button:hover::after { 45 filter: blur(30px); 46} 47 48.button:hover::before { 49 transform: rotate(-180deg); 50} 51 52.button:active::before { 53 scale: 0.7; 54} 55 56
9.8K views
9.8K views
Comments
4lowa2006 20. October at 6:40
20. October at 6:40
supeer
gharsh11032000 20. October at 7:22
20. October at 7:22
@lowa2006 Thank you ☺️
faxriddin20 8. October at 13:20
8. October at 13:20
very beautiful
gharsh11032000 9. October at 5:28
9. October at 5:28
@faxriddin20 Thank you ☺️
MIT License