Button by doniaskima
#e8e8e8
1.btn-9, 2.btn-9 *, 3.btn-9 :after, 4.btn-9 :before, 5.btn-9:after, 6.btn-9:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-9 { 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-9:disabled { 31 cursor: default; 32} 33 34.btn-9:-moz-focusring { 35 outline: auto; 36} 37 38.btn-9 svg { 39 display: block; 40 vertical-align: middle; 41} 42 43.btn-9 [hidden] { 44 display: none; 45} 46 47.btn-9 { 48 border-radius: 99rem; 49 border-width: 2px; 50 overflow: hidden; 51 padding: 0.8rem 3rem; 52 position: relative; 53} 54 55.btn-9 span { 56 mix-blend-mode: difference; 57} 58 59.btn-9:after, 60.btn-9:before { 61 --tilt: 1.2rem; 62 background: #fff; 63 -webkit-clip-path: polygon( 64 0 0, 65 calc(100% - var(--tilt)) 0, 66 100% 50%, 67 calc(100% - var(--tilt)) 100%, 68 0 100% 69 ); 70 clip-path: polygon( 71 0 0, 72 calc(100% - var(--tilt)) 0, 73 100% 50%, 74 calc(100% - var(--tilt)) 100%, 75 0 100% 76 ); 77 content: ""; 78 display: block; 79 height: 100%; 80 left: calc(-100% - var(--tilt)); 81 position: absolute; 82 top: 0; 83 transform: translateX(var(--progress, 0)); 84 transition: transform 0.2s ease; 85 width: calc(100% + var(--tilt)); 86} 87 88.btn-9:after { 89 left: 100%; 90 transform: translateX(var(--progress, 0)) rotate(180deg); 91 z-index: -1; 92} 93 94.btn-9:hover:before { 95 --progress: 100%; 96} 97 98.btn-9:hover:after { 99 --progress: -100%; 100} 101
408 views
408 views
MIT License