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