Button by Damithkumara
#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 cursor: pointer; 13} 14 15button::before { 16 content: "button"; 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22 background-color: #363636; 23 color: #ff0; 24 display: flex; 25 justify-content: center; 26 align-items: center; 27 transition: all 0.5s; 28} 29 30button:hover::before { 31 left: 100%; 32 transform: scale(0) rotateY(360deg); 33 opacity: 0; 34} 35 36button::after { 37 content: "button"; 38 position: absolute; 39 top: 0; 40 left: -100%; 41 width: 100%; 42 height: 100%; 43 background-color: #363636; 44 color: #ff0; 45 display: flex; 46 justify-content: center; 47 align-items: center; 48 transition: all 0.5s; 49 transform: scale(0) rotateY(0deg); 50 opacity: 0; 51} 52 53button:hover::after { 54 left: 0; 55 transform: scale(1) rotateY(360deg); 56 opacity: 1; 57} 58
7.9K views
7.9K views
MIT License