Button by eslam-hany
#e8e8e8
1.btn { 2 position: relative; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 width: 140px; 7 height: 40px; 8 border: 3px solid #0b2447; 9 color: #fff; 10 font-size: 20px; 11 font-weight: bolder; 12 background-color: #0d6efd; 13 overflow: hidden; 14 transition: all 0.5s; 15 cursor: pointer; 16} 17 18.hover { 19 transform: translateX(0%); 20 transition: all 0.5s; 21} 22 23.btn::after { 24 position: absolute; 25 content: attr(data-text); 26 left: 0; 27 transform: translateX(-100%); 28 transition: all 0.5s; 29} 30 31.btn:hover::after { 32 transform: translateX(50%); 33 transition: all 0.5s; 34} 35 36.btn:hover .hover { 37 position: absolute; 38 transform: translateX(150%); 39 transition: all 0.5s; 40}
544 views
544 views
MIT License