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