Button by satyamchaudharydev
#212121
1button { 2 width: 140px; 3 height: 56px; 4 overflow: hidden; 5 border: none; 6 color: #fff; 7 background: none; 8 position: relative; 9 padding-bottom: 2em; 10 cursor: pointer; 11} 12 13button > div, 14button > svg { 15 position: absolute; 16 width: 100%; 17 height: 100%; 18 display: flex; 19} 20 21button:before { 22 content: ""; 23 position: absolute; 24 height: 2px; 25 bottom: 0; 26 left: 0; 27 width: 100%; 28 transform: scaleX(0); 29 transform-origin: bottom right; 30 background: currentColor; 31 transition: transform 0.25s ease-out; 32} 33 34button:hover:before { 35 transform: scaleX(1); 36 transform-origin: bottom left; 37} 38 39button .clone > *, 40button .text > * { 41 opacity: 1; 42 font-size: 1.3rem; 43 transition: 0.2s; 44 margin-left: 4px; 45} 46 47button .clone > * { 48 transform: translateY(60px); 49} 50 51button:hover .clone > * { 52 opacity: 1; 53 transform: translateY(0px); 54 transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 55} 56 57button:hover .text > * { 58 opacity: 1; 59 transform: translateY(-60px); 60 transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 61} 62 63button:hover .clone > :nth-child(1) { 64 transition-delay: 0.15s; 65} 66 67button:hover .clone > :nth-child(2) { 68 transition-delay: 0.2s; 69} 70 71button:hover .clone > :nth-child(3) { 72 transition-delay: 0.25s; 73} 74 75button:hover .clone > :nth-child(4) { 76 transition-delay: 0.3s; 77} 78/* icon style and hover */ 79button svg { 80 width: 20px; 81 right: 0; 82 top: 50%; 83 transform: translateY(-50%) rotate(-50deg); 84 transition: 0.2s ease-out; 85} 86 87button:hover svg { 88 transform: translateY(-50%) rotate(-90deg); 89} 90
13K views
13K views
Variations
1 MIT License