6.3K views
1.btn { 2 --color: #00A97F; 3 --color2: rgb(10, 25, 30); 4 padding: 0.8em 1.75em; 5 background-color: transparent; 6 border-radius: 6px; 7 border: .3px solid var(--color); 8 transition: .5s; 9 position: relative; 10 overflow: hidden; 11 cursor: pointer; 12 z-index: 1; 13 font-weight: 300; 14 font-size: 17px; 15 font-family: 'Roboto', 'Segoe UI', sans-serif; 16 text-transform: uppercase; 17 color: var(--color); 18} 19 20.btn::after, .btn::before { 21 content: ''; 22 display: block; 23 height: 100%; 24 width: 100%; 25 transform: skew(90deg) translate(-50%, -50%); 26 position: absolute; 27 inset: 50%; 28 left: 25%; 29 z-index: -1; 30 transition: .5s ease-out; 31 background-color: var(--color); 32} 33 34.btn::before { 35 top: -50%; 36 left: -25%; 37 transform: skew(90deg) rotate(180deg) translate(-50%, -50%); 38} 39 40.btn:hover::before { 41 transform: skew(45deg) rotate(180deg) translate(-50%, -50%); 42} 43 44.btn:hover::after { 45 transform: skew(45deg) translate(-50%, -50%); 46} 47 48.btn:hover { 49 color: var(--color2); 50} 51 52.btn:active { 53 filter: brightness(.7); 54 transform: scale(.98); 55}
nikk7007
Nikolas
MIT License