Button by doniaskima
#e8e8e8
1.btn-17, 2.btn-17 *, 3.btn-17 :after, 4.btn-17 :before, 5.btn-17:after, 6.btn-17:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-17 { 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 font-weight: 900; 23 line-height: 1.5; 24 margin: 0; 25 -webkit-mask-image: -webkit-radial-gradient(#000, #fff); 26 padding: 0; 27 text-transform: uppercase; 28} 29 30.btn-17:disabled { 31 cursor: default; 32} 33 34.btn-17:-moz-focusring { 35 outline: auto; 36} 37 38.btn-17 svg { 39 display: block; 40 vertical-align: middle; 41} 42 43.btn-17 [hidden] { 44 display: none; 45} 46 47.btn-17 { 48 border-radius: 99rem; 49 border-width: 2px; 50 padding: 0.8rem 3rem; 51 z-index: 0; 52} 53 54.btn-17, 55.btn-17 .text-container { 56 overflow: hidden; 57 position: relative; 58} 59 60.btn-17 .text-container { 61 display: block; 62 mix-blend-mode: difference; 63} 64 65.btn-17 .text { 66 display: block; 67 position: relative; 68} 69 70.btn-17:hover .text { 71 -webkit-animation: move-up-alternate 0.3s forwards; 72 animation: move-up-alternate 0.3s forwards; 73} 74 75@-webkit-keyframes move-up-alternate { 76 0% { 77 transform: translateY(0); 78 } 79 80 50% { 81 transform: translateY(80%); 82 } 83 84 51% { 85 transform: translateY(-80%); 86 } 87 88 to { 89 transform: translateY(0); 90 } 91} 92 93@keyframes move-up-alternate { 94 0% { 95 transform: translateY(0); 96 } 97 98 50% { 99 transform: translateY(80%); 100 } 101 102 51% { 103 transform: translateY(-80%); 104 } 105 106 to { 107 transform: translateY(0); 108 } 109} 110 111.btn-17:after, 112.btn-17:before { 113 --skew: 0.2; 114 background: #fff; 115 content: ""; 116 display: block; 117 height: 102%; 118 left: calc(-50% - 50% * var(--skew)); 119 pointer-events: none; 120 position: absolute; 121 top: -104%; 122 transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0)); 123 transition: transform 0.2s ease; 124 width: 100%; 125} 126 127.btn-17:after { 128 --progress: 0%; 129 left: calc(50% + 50% * var(--skew)); 130 top: 102%; 131 z-index: -1; 132} 133 134.btn-17:hover:before { 135 --progress: 100%; 136} 137 138.btn-17:hover:after { 139 --progress: -102%; 140} 141
4.6K views
4.6K views
MIT License