3.9K views
1.btn { 2 padding: 1.1em 2em; 3 background: none; 4 border: 2px solid #fff; 5 font-size: 15px; 6 color: #131313; 7 cursor: pointer; 8 position: relative; 9 overflow: hidden; 10 transition: all 0.3s; 11 border-radius: 12px; 12 background-color: #ecd448; 13 font-weight: bolder; 14 box-shadow: 0 2px 0 2px #000; 15} 16 17.btn:before { 18 content: ""; 19 position: absolute; 20 width: 100px; 21 height: 120%; 22 background-color: #ff6700; 23 top: 50%; 24 transform: skewX(30deg) translate(-150%, -50%); 25 transition: all 0.5s; 26} 27 28.btn:hover { 29 background-color: #4cc9f0; 30 color: #fff; 31 box-shadow: 0 2px 0 2px #0d3b66; 32} 33 34.btn:hover::before { 35 transform: skewX(30deg) translate(150%, -50%); 36 transition-delay: 0.1s; 37} 38 39.btn:active { 40 transform: scale(0.9); 41}
Mike11jr
Mike Grün
MIT License