#e8e8e8
1.btn { 2 width: 150px; 3 height: 50px; 4 border: 1px solid #333; 5 font-size: 20px; 6 cursor: pointer; 7 -webkit-tap-highlight-color: transparent; 8 display: flex; 9 align-items: center; 10 justify-content: center; 11 position: relative; 12 z-index: 0; 13 transition: 1s; 14 color: #000; 15 font-family: sans-serif; 16} 17 18.btn::before, 19.btn::after { 20 position: absolute; 21 background: #e8e8e8; 22 z-index: -1; 23 transition: 1s; 24 content: ""; 25} 26 27.btn::before { 28 height: 50px; 29 width: 130px; 30} 31 32.btn::after { 33 width: 150px; 34 height: 30px; 35} 36 37.noselect { 38 -webkit-touch-callout: none; 39 -webkit-user-select: none; 40 -khtml-user-select: none; 41 -moz-user-select: none; 42 -ms-user-select: none; 43 user-select: none; 44} 45 46.btn:hover::before { 47 width: 0px; 48 background: #e8e8e8; 49} 50 51.btn:hover::after { 52 height: 0px; 53 background: #fff; 54} 55 56.btn:hover { 57 background: #fff; 58}
455 views
Variation of abutton
455 views
Variation of abutton
Comments
MIT License