Button by KhaledMatalkah
#e8e8e8
1.button { 2 display: inline-block; 3 padding: 15px 32px; 4 font-size: 17px; 5 font-weight: bold; 6 color: rgb(0, 0, 0); 7 background: transparent; 8 border-radius: 50px; 9 text-align: center; 10 text-decoration: none; 11 cursor: pointer; 12 position: relative; 13 border: none; 14 z-index: 1; 15} 16 17.button { 18 overflow: hidden; 19} 20 21.button:before { 22 content: ""; 23 position: absolute; 24 top: 50%; 25 left: -100%; 26 width: 100%; 27 height: 100%; 28 background-color: rgb(255, 255, 255); 29 transition: left 0.8s ease-in-out; 30 z-index: -1; 31} 32 33.button:hover:before { 34 left: 0%; 35} 36 37.button:after { 38 content: ""; 39 position: absolute; 40 bottom: 50%; 41 right: -100%; 42 width: 100%; 43 height: 100%; 44 background-color: rgb(255, 255, 255); 45 transition: right 0.8s ease-in-out; 46 z-index: -1; 47} 48 49.button:hover:after { 50 right: 0%; 51}
531 views
531 views
MIT License