Button by glisovic01
#212121
1.btn { 2 display: inline-block; 3 font-family: sans-serif; 4 font-weight: 600; 5 font-size: 16px; 6 color: #fff; 7 margin: 1rem auto; 8 padding: 0.7rem 2rem; 9 border-radius: 30em; 10 border-style: none; 11 position: relative; 12 z-index: 1; 13 overflow: hidden; 14 text-decoration: none; 15 text-transform: uppercase; 16 letter-spacing: 2px; 17 background-color: transparent; 18 box-shadow: 1px 1px 12px #000000; 19} 20 21.btn::before { 22 content: ""; 23 width: 100%; 24 height: 100%; 25 position: absolute; 26 top: 0; 27 left: 0; 28 background-color: #fff; 29 transform: translateX(-101%); 30 transition: all .3s ease; 31 z-index: -1; 32} 33 34.btn:hover { 35 color: #272727; 36 transition: all .3s ease; 37} 38 39.btn:hover::before { 40 transform: translateX(0); 41}
1.3K views
1.3K views
MIT License