Button by Wlidha09
#212121
1.box { 2 height: 66.66%; 3 width: 100%; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7} 8 9.btn { 10 line-height: 50px; 11 height: 50px; 12 text-align: center; 13 width: 150px; 14 cursor: pointer; 15 color: #FFF; 16 transition: all 0.3s; 17 position: relative; 18} 19 20.btn button { 21 z-index: 2; 22 display: block; 23 position: absolute; 24 width: 100%; 25 height: 100%; 26 color: #fff; 27 font-size: 17px; 28 border: none; 29 background-color: transparent; 30} 31 32.btn::before { 33 content: ''; 34 position: absolute; 35 top: 0; 36 left: 0; 37 width: 100%; 38 height: 100%; 39 z-index: 1; 40 transition: all 0.5s; 41 border: 1px solid rgba(255,255,255,0.2); 42 background-color: rgba(255,255,255,0.1); 43} 44 45.btn::after { 46 content: ''; 47 position: absolute; 48 top: 0; 49 left: 0; 50 width: 100%; 51 height: 100%; 52 z-index: 1; 53 transition: all 0.5s; 54 border: 1px solid rgba(255,255,255,0.2); 55 background-color: rgba(255,255,255,0.1); 56} 57 58.btn:hover::before { 59 transform: rotate(-45deg); 60 background-color: rgba(255,255,255,0); 61} 62 63.btn:hover::after { 64 transform: rotate(45deg); 65 background-color: rgba(255,255,255,0); 66}
586 views
586 views
MIT License