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