Button by gagan-gv
#212121
1button { 2 height: 4em; 3 width: 15em; 4 border: none; 5 border-radius: 40px; 6 background-color: #fff; 7 cursor: pointer; 8} 9 10button span { 11 z-index: 1; 12 display: inline-block; 13 background-color: black; 14 height: 3em; 15 width: 11.5em; 16 border-radius: 25px; 17 color: #fff; 18 line-height: 55px; 19 font-size: 18px; 20 letter-spacing: 3px; 21 transition: all 0.5s; 22} 23 24button .container { 25 z-index: -1; 26 width: 0; 27 position: relative; 28 display: flex; 29 justify-content: center; 30 transform: translateY(-50px); 31 transition: all 0.4s; 32} 33 34button .container svg { 35 padding: 0 10px; 36} 37 38button:hover span { 39 width: 0; 40} 41 42button:hover .container { 43 z-index: 2; 44 width: 100%; 45} 46
12K views
12K views
Variations
1 MIT License