Button by rrr63
#e8e8e8
1.button { 2 padding: 10px 35px; 3 background-color: #EBF5EE; 4 font-weight: bolder; 5 border: 0px; 6 position: relative; 7 cursor: pointer; 8 overflow: hidden; 9 border-radius: 5px; 10 transition: all .2s ease-in-out .1s; 11} 12 13.button:hover { 14 background-color: #EBF5EE; 15 transform: scale(1.2) rotate(5deg); 16} 17 18.button:before { 19 content: ''; 20 position: absolute; 21 background-color: #78A1BB; 22 height: 180%; 23 top: -30%; 24 left: -40%; 25 transform: rotateZ(20deg); 26 width: 40px; 27 transition: left .2s ease-in-out, left 0s; 28} 29 30.button:after { 31 content: ''; 32 position: absolute; 33 background-color: #283044; 34 height: 180%; 35 top: -30%; 36 left: -40%; 37 transform: translateX(-40px) rotateZ(20deg); 38 width: 40px; 39 transition: left .2s ease-in-out, left 0s; 40} 41 42.button:hover:after { 43 left: 150%; 44 transition: left .3s ease-in-out; 45} 46 47.button:hover:before { 48 left: 150%; 49 transition: left .3s ease-in-out; 50}
413 views
413 views
MIT License