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