#212121
1button { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%,-50%); 6 padding: 15px 30px; 7 text-transform: uppercase; 8 text-decoration: none; 9 color: #fff; 10 background: black; 11 border: none; 12 letter-spacing: 2px; 13 font-size: 17px; 14} 15 16button:before { 17 content: ''; 18 position: absolute; 19 top: 0; 20 left: 0; 21 width: 100%; 22 height: 100%; 23 background: #03a; 24 z-index: -1; 25 transition: transform 0.5s; 26 transform-origin: bottom right; 27 transform: scale(0); 28} 29 30button:hover:before { 31 transition: transform 0.5s; 32 transform-origin: top left; 33 transform: scale(1); 34} 35 36button:after { 37 content: ''; 38 position: absolute; 39 top: 0; 40 left: 0; 41 width: 100%; 42 height: 100%; 43 background: transparent; 44 border: 2px solid #fff; 45 box-sizing: border-box; 46 z-index: -1; 47 transition: transform 0.5s; 48 transform-origin: bottom right; 49 transform: scale(1); 50} 51 52button:hover:after { 53 transition: transform 0.5s; 54 transform-origin: top left; 55 transform: scale(0); 56}
Comments
MIT License