Button by KhaledMatalkah
#212121
1.button { 2 display: inline-block; 3 padding: 15px 32px; 4 font-size: 17px; 5 font-weight: bold; 6 color: rgb(53, 53, 53); 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 overflow: hidden; 16} 17 18.button:before { 19 content: ""; 20 position: absolute; 21 top: 0%; 22 left: -100%; 23 width: 100%; 24 height: 100%; 25 background-color: blanchedalmond; 26 transition: left 0.8s ease-in-out; 27 z-index: -1; 28} 29 30.button:hover:before { 31 left: 0%; 32} 33 34.button:after { 35 content: ""; 36 position: absolute; 37 top: 0%; 38 left: 0%; 39 width: 100%; 40 height: 100%; 41 background-color: rgba(0, 0, 0, 0.2); 42 transition: background-color 0.8s ease-in-out; 43 z-index: -1; 44} 45 46.button:hover:after { 47 background-color: transparent; 48} 49
406 views
406 views
MIT License