Button by doniaskima
#e8e8e8
1.btn-57, 2.btn-57 *, 3.btn-57 :after, 4.btn-57 :before, 5.btn-57:after, 6.btn-57:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-57 { 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 line-height: 1.5; 23 margin: 0; 24 -webkit-mask-image: -webkit-radial-gradient(#000, #fff); 25 padding: 0; 26} 27 28.btn-57:disabled { 29 cursor: default; 30} 31 32.btn-57:-moz-focusring { 33 outline: auto; 34} 35 36.btn-57 svg { 37 display: block; 38 vertical-align: middle; 39} 40 41.btn-57 [hidden] { 42 display: none; 43} 44 45.btn-57 { 46 background: none; 47 border: 3px solid; 48 border-radius: 999px; 49 box-sizing: border-box; 50 color: #000; 51 display: block; 52 font-weight: 900; 53 -webkit-mask-image: none; 54 padding: 20px 60px; 55 position: relative; 56 text-transform: uppercase; 57} 58 59.btn-57:before { 60 background: #fff; 61 border-radius: 999px; 62 content: ""; 63 inset: 0; 64 position: absolute; 65 transform: translate(10px, 10px); 66 transition: transform 0.2s; 67 z-index: -1; 68} 69 70.btn-57:hover:before { 71 transform: translate(0); 72} 73
460 views
460 views
MIT License