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.menu__button { 12 min-width: 62px; 13 height: 36px; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 padding: 8px 16px; 18 border: 1px solid #fff; 19 background-color: transparent; 20 position: relative; 21} 22 23.menu__button::before { 24 content: ''; 25 width: 100%; 26 height: 0; 27 background-color: #fff; 28 position: absolute; 29 bottom: 0; 30 left: 0; 31 z-index: -1; 32 transition: all .4s; 33} 34 35.menu__button:hover::before { 36 height: 100%; 37 top: 0; 38} 39 40.menu__button span { 41 color: #fff; 42 line-height: 1; 43 transition: color .4s; 44} 45 46.menu__button:hover span { 47 color: #000; 48}
Β
450 views
Variation of abutton
MIT License