#212121
1button { 2 position: relative; 3 background-color: rgb(230, 34, 77); 4 border-radius: 5px; 5 box-shadow: rgb(121, 18, 55) 0px 4px 0px 0px; 6 padding: 15px; 7 background-repeat: no-repeat; 8 box-sizing: border-box; 9 width: 154px; 10 height: 49px; 11 color: #fff; 12 border: none; 13 font-size: 20px; 14 transition: all .3s ease-in-out; 15 z-index: 1; 16 overflow: hidden; 17} 18 19button::before { 20 content: ""; 21 background-color: rgb(248, 50, 93); 22 width: 0; 23 height: 100%; 24 position: absolute; 25 top: 0; 26 left: 0; 27 z-index: -1; 28 transition: width 700ms ease-in-out; 29 display: inline-block; 30} 31 32button:hover::before { 33 width: 100%; 34}
7.6K views
7.6K views
Comments
MIT License