Button by NabeelAhmadK
#e8e8e8
1button { 2 width: fit-content; 3 height: 45px; 4 background: #ffffff0d; 5 border-radius: 8px; 6 border: 2px solid #334b79; 7 font-size: 15px; 8 font-weight: bold; 9 color: #334b79; 10 -webkit-transition: 0.5s all ease; 11 transition: 0.5s all ease; 12 position: relative; 13 overflow: hidden; 14 padding: 10px 25px; 15 z-index: 1; 16} 17 18button:before { 19 width: 50%; 20 height: 100%; 21 content: ""; 22 margin: auto; 23 position: absolute; 24 top: 0%; 25 left: -50%; 26 background: #334b79; 27 transition: all 0.5s ease; 28 z-index: -1; 29} 30 31button:after { 32 width: 50%; 33 height: 100%; 34 content: ""; 35 margin: auto; 36 position: absolute; 37 top: 0%; 38 left: 100%; 39 background: #334b79; 40 transition: all 0.5s ease; 41 z-index: -1; 42} 43 44button:hover { 45 color: white; 46 cursor: pointer; 47} 48 49button:hover:before { 50 top: 0; 51 left: 0; 52} 53 54button:hover:after { 55 top: 0; 56 left: 50%; 57}
722 views
722 views
MIT License