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.small-button { 12 min-width: 104px; 13 height: 40px; 14 border-radius: 40px; 15 background: #000; 16 padding: 12px 28px; 17 display: flex; 18 justify-content: center; 19 align-items: center; 20 color: #fff; 21 font-size: 13px; 22 font-weight: 400; 23 line-height: 1; 24 transition: background .2s ease-in-out, color .2s ease-in-out; 25 position: relative; 26} 27 28.small-button::before { 29 content: ''; 30 width: 100%; 31 height: 100%; 32 border-radius: 40px; 33 background: linear-gradient(69deg, #c3aab2 -4.77%, #9ec 46.72%, #80c0c8 90.23%, #4B8bfa 134.46%); 34 position: absolute; 35 top: 0; 36 left: 0; 37 opacity: 0; 38 z-index: -1; 39 transition: opacity .2s ease-in-out; 40} 41 42.small-button:hover { 43 background: transparent; 44 color: #000; 45} 46 47.small-button:hover::before { 48 opacity: 1; 49}
Β
275 views
Variation of abutton
MIT License