Button by STORM992002
#e8e8e8
1button { 2 position: relative; 3 overflow: hidden; 4 border: none; 5 color: #3b5998; 6 display: inline-block; 7 font-size: 15px; 8 line-height: 15px; 9 padding: 18px 18px 17px; 10 text-decoration: none; 11 cursor: pointer; 12 background: #fff; 13 user-select: none; 14 -webkit-user-select: none; 15 touch-action: manipulation; 16} 17 18button span:first-child { 19 position: relative; 20 transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1); 21 z-index: 10; 22} 23button:hover { 24 color: #fff; 25} 26 27button:after { 28 content: ""; 29 position: absolute; 30 bottom: -50%; 31 left: 0; 32 width: 100%; 33 height: 100%; 34 background-color: #3b5998; 35 transform-origin: bottom center; 36 transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1); 37 transform: skewY(9.3deg) scaleY(0); 38 z-index: 1; 39} 40 41button:hover:after { 42 transform-origin: bottom center; 43 transform: skewY(9.3deg) scaleY(2); 44} 45
225 views
Variation of abutton
MIT License