Button by Bodyhc
#e8e8e8
1.button, 2.button *, 3.button :after, 4.button :before, 5.button:after, 6.button:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10.button { 11 -webkit-tap-highlight-color: transparent; 12 -webkit-appearance: button; 13 background-color: #000; 14 background-image: none; 15 color: #fff; 16 cursor: pointer; 17 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 18 Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 19 Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 20 font-size: 100%; 21 font-weight: 900; 22 line-height: 1.5; 23 margin: 0; 24 mask-image: -webkit-radial-gradient(#000, #fff); 25 padding: 0; 26 text-transform: uppercase; 27} 28.button:disabled { 29 cursor: default; 30} 31.button:-moz-focusring { 32 outline: auto; 33} 34.button svg { 35 display: block; 36} 37.button [hidden] { 38 display: none; 39} 40.button { 41 border-radius: 99rem; 42 border-width: 2px; 43 overflow: hidden; 44 padding: 0.8rem 3rem; 45 position: relative; 46} 47.button span { 48 mix-blend-mode: difference; 49} 50.button:after, 51.button:before { 52 background: linear-gradient( 53 90deg, 54 #fff 25%, 55 transparent 0, 56 transparent 50%, 57 #fff 0, 58 #fff 75%, 59 transparent 0 60 ); 61 content: ""; 62 inset: 0; 63 position: absolute; 64 transform: translateY(var(--progress, 100%)); 65 transition: transform 0.2s ease; 66} 67.button:after { 68 --progress: -100%; 69 background: linear-gradient( 70 90deg, 71 transparent 0, 72 transparent 25%, 73 #fff 0, 74 #fff 50%, 75 transparent 0, 76 transparent 75%, 77 #fff 0 78 ); 79 z-index: -1; 80} 81.button:hover:after, 82.button:hover:before { 83 --progress: 0; 84} 85
166 views
166 views
MIT License