Button by ArturCodeCraft
#212121
1/* <reset-style> ============================ */ 2button { 3 border: none; 4 background: none; 5 padding: 0; 6 margin: 0; 7 cursor: pointer; 8 font-family: inherit; 9} 10/* <main-style> ============================ */ 11.secondary-button { 12 min-width: 111px; 13 height: 52px; 14 border-radius: 36px; 15 background: #fff; 16 padding: 16px 40px; 17 display: flex; 18 justify-content: center; 19 align-items: center; 20 color: #000; 21 font-size: 16px; 22 font-weight: 400; 23 line-height: 1.5; 24 letter-spacing: -0.32px; 25 transition: color .2s ease-in-out; 26 position: relative; 27} 28 29.secondary-button::before, 30.secondary-button::after { 31 content: ''; 32 width: calc(100% + 4px); 33 height: calc(100% + 4px); 34 border-radius: 40px; 35 position: absolute; 36 top: 50%; 37 left: 50%; 38 z-index: -1; 39 transform: translate(-50%, -50%); 40} 41 42.secondary-button::before { 43 background: linear-gradient(88deg, #c3aab2 0.66%, #9ec 57.2%, #80c0c8 75.87%, #4b8bfa 98.72%); 44 opacity: 0; 45 transition: opacity .2s ease-in-out; 46} 47 48.secondary-button::after { 49 background: #000; 50 transition: opacity .2s ease-in-out; 51} 52 53.secondary-button:hover::before { 54 opacity: 1; 55} 56 57.secondary-button:hover::after { 58 opacity: 0; 59}
Β
241 views
Variation of abutton
MIT License