Button by doniaskima
#e8e8e8
1.btn-55, 2.btn-55 *, 3.btn-55 :after, 4.btn-55 :before, 5.btn-55:after, 6.btn-55:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-55 { 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-55:disabled { 29 cursor: default; 30} 31 32.btn-55:-moz-focusring { 33 outline: auto; 34} 35 36.btn-55 svg { 37 display: block; 38 vertical-align: middle; 39} 40 41.btn-55 [hidden] { 42 display: none; 43} 44 45.btn-55 { 46 background: linear-gradient(90deg, blue, red); 47 border-radius: 999px; 48 box-sizing: border-box; 49 color: #000; 50 display: block; 51 font-weight: 900; 52 overflow: hidden; 53 padding: 1.8rem 5rem; 54 position: relative; 55 text-transform: uppercase; 56} 57 58.btn-55 span { 59 background: #1e293b; 60 border-radius: 999px; 61 color: #fff; 62 display: grid; 63 inset: 5px; 64 place-items: center; 65 position: absolute; 66 transition: background 0.3s; 67} 68 69.btn-55:hover span { 70 background: none; 71} 72
392 views
392 views
MIT License