#e8e8e8
1.button { 2 padding: 1em 2em; 3 border: none; 4 border-radius: 5px; 5 font-weight: bold; 6 letter-spacing: 2px; 7 text-transform: uppercase; 8 color: #ff6f69; 9 transition: all 500ms; 10 font-size: 18px; 11 position: relative; 12 overflow: hidden; 13 outline: 2px solid #ff6f69; 14} 15 16button:hover { 17 color: #ffffff; 18 transform: scale(1.05); 19 outline: 2px solid #ff6f69; 20 box-shadow: 2px 3px 10px -2px #ff6f69; 21} 22 23button::before { 24 content: ""; 25 position: absolute; 26 left: -50px; 27 top: 0; 28 width: 0; 29 height: 100%; 30 background-color: #ff6f69; 31 transform: skewX(45deg); 32 z-index: -1; 33 transition: width 500ms; 34} 35 36button:hover::before { 37 width: 200%; 38}
Comments
MIT License