#e8e8e8
1.btn-53, 2.btn-53 *, 3.btn-53 :after, 4.btn-53 :before, 5.btn-53:after, 6.btn-53:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-53 { 12 -webkit-tap-highlight-color: transparent; 13 -webkit-appearance: button; 14 background-color: #000; 15 background-image: none; 16 color: #fff; 17 cursor: pointer; 18 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 19 Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 20 Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 21 font-size: 100%; 22 line-height: 1.5; 23 margin: 0; 24 -webkit-mask-image: -webkit-radial-gradient(#000, #fff); 25 padding: 0; 26} 27 28.btn-53:disabled { 29 cursor: default; 30} 31 32.btn-53:-moz-focusring { 33 outline: auto; 34} 35 36.btn-53 svg { 37 display: block; 38 vertical-align: middle; 39} 40 41.btn-53 [hidden] { 42 display: none; 43} 44 45.btn-53 { 46 border: 1px solid; 47 border-radius: 999px; 48 box-sizing: border-box; 49 display: block; 50 font-weight: 900; 51 overflow: hidden; 52 padding: 1.2rem 3rem; 53 position: relative; 54 text-transform: uppercase; 55} 56 57.btn-53 .original { 58 background: #fff; 59 color: #000; 60 display: grid; 61 inset: 0; 62 place-content: center; 63 position: absolute; 64 transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1); 65} 66 67.btn-53:hover .original { 68 transform: translateY(100%); 69} 70 71.btn-53 .letters { 72 display: inline-flex; 73} 74 75.btn-53 span { 76 opacity: 0; 77 transform: translateY(-15px); 78 transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.2s; 79} 80 81.btn-53 span:nth-child(2n) { 82 transform: translateY(15px); 83} 84 85.btn-53:hover span { 86 opacity: 1; 87 transform: translateY(0); 88} 89 90.btn-53:hover span:nth-child(2) { 91 transition-delay: 0.1s; 92} 93 94.btn-53:hover span:nth-child(3) { 95 transition-delay: 0.2s; 96} 97 98.btn-53:hover span:nth-child(4) { 99 transition-delay: 0.3s; 100} 101 102.btn-53:hover span:nth-child(5) { 103 transition-delay: 0.4s; 104} 105 106.btn-53:hover span:nth-child(6) { 107 transition-delay: 0.5s; 108} 109
2.6K views
2.6K views
Comments
MIT License