Button by JaydipPrajapati1910
#212121
1button { 2 position: relative; 3 overflow: hidden; 4 border: 1px solid #18181a; 5 color: #18181a; 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 font-weight: 800; 14 user-select: none; 15 -webkit-user-select: none; 16 touch-action: manipulation; 17} 18 19button span:first-child { 20 position: relative; 21 transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1); 22 z-index: 10; 23} 24 25button span:last-child { 26 display: block; 27 position: absolute; 28 bottom: 0; 29 transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1); 30 z-index: 100; 31 opacity: 0; 32 top: 50%; 33 left: 50%; 34 transform: translateY(225%) translateX(-50%); 35 height: 14px; 36 line-height: 13px; 37} 38 39button:after { 40 content: ""; 41 position: absolute; 42 bottom: -50%; 43 left: 0; 44 width: 100%; 45 height: 100%; 46 background-color: #91C9FF; 47 transform-origin: bottom center; 48 transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1); 49 transform: skewY(9.3deg) scaleY(0); 50 z-index: 50; 51} 52 53button:hover:after { 54 transform-origin: bottom center; 55 transform: skewY(9.3deg) scaleY(2); 56} 57 58button:hover span:last-child { 59 transform: translateX(-50%) translateY(-50%); 60 opacity: 1; 61 transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1); 62}
416 views
Variation of abutton
MIT License