15K views
1.btn { 2 width: 150px; 3 height: 50px; 4 border-radius: 5px; 5 border: none; 6 transition: all 0.5s ease-in-out; 7 font-size: 20px; 8 font-family: Verdana, Geneva, Tahoma, sans-serif; 9 font-weight: 600; 10 display: flex; 11 align-items: center; 12 background: #040f16; 13 color: #f5f5f5; 14} 15 16.btn:hover { 17 box-shadow: 0 0 20px 0px #2e2e2e3a; 18} 19 20.btn .icon { 21 position: absolute; 22 height: 40px; 23 width: 70px; 24 display: flex; 25 justify-content: center; 26 align-items: center; 27 transition: all 0.5s; 28} 29 30.btn .text { 31 transform: translateX(55px); 32} 33 34.btn:hover .icon { 35 width: 175px; 36} 37 38.btn:hover .text { 39 transition: all 0.5s; 40 opacity: 0; 41} 42 43.btn:focus { 44 outline: none; 45} 46 47.btn:active .icon { 48 transform: scale(0.85); 49}