Button by AyuuLima
#212121
1.button { 2 position: relative; 3 width: 120px; 4 height: 40px; 5 background-color: rgb(0, 0, 0); 6 display: flex; 7 align-items: center; 8 color: rgb(255, 255, 255); 9 flex-direction: column; 10 justify-content: center; 11 border: none; 12 padding: 20px; 13 gap: 120px; 14 border-radius: 10px; 15 cursor: pointer; 16} 17 18.button::before { 19 content: ""; 20 position: absolute; 21 inset: 0; 22 left: 3px; 23 top: -4px; 24 margin: auto; 25 width: -128px; 26 height: -48px; 27 border-radius: 10px; 28 background: linear-gradient(-45deg, #10d32a 0%, rgb(119, 235, 235) 100%); 29 z-index: -10; 30 pointer-events: visiblePainted; 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, #00ff22 0%, rgb(0, 250, 250) 100%); 40 transform: translate3d(0, 0, 0) scale(0.95); 41 filter: blur(15px); 42} 43 44.button:hover::after { 45 filter: blur(40px); 46} 47 48.button:hover::before { 49 transform: rotate(-180deg); 50} 51 52.button:active::before { 53 scale: 0.7; 54} 55
239 views
239 views
MIT License