#212121
1button { 2 padding: 0.9em 1.8em; 3 text-transform: uppercase; 4 text-decoration: none; 5 letter-spacing: 4px; 6 color: transparent; 7 border: 3px solid #ff0; 8 font-size: 14px; 9 position: relative; 10 font-family: inherit; 11 background: transparent; 12} 13 14button::before { 15 content: "button"; 16 position: absolute; 17 top: 0; 18 left: 0; 19 width: 100%; 20 height: 100%; 21 background-color: #363636; 22 color: #ff0; 23 display: flex; 24 justify-content: center; 25 align-items: center; 26 transition: all 0.5s; 27} 28 29button:hover::before { 30 left: 100%; 31 transform: scale(0) rotateY(360deg); 32 opacity: 0; 33} 34 35button::after { 36 content: "button"; 37 position: absolute; 38 top: 0; 39 left: -100%; 40 width: 100%; 41 height: 100%; 42 background-color: #363636; 43 color: #ff0; 44 display: flex; 45 justify-content: center; 46 align-items: center; 47 transition: all 0.5s; 48 transform: scale(0) rotateY(0deg); 49 opacity: 0; 50} 51 52button:hover::after { 53 left: 0; 54 transform: scale(1) rotateY(360deg); 55 opacity: 1; 56} 57
6.7K views
6.7K views
Comments
MIT License