3K views
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 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} 23 24button span:last-child { 25 color: white; 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: black; 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}
Variations
e-coders
E - Coders (Aasheesh Agarwal)
Full-stack, Front-end, Back-end, Django, Python, Flask, Command-line, IT, Book writer, PHP, Scratch, Java, Markdown, Git
MIT License