<button class="btn-57">Button</button> .btn-57, .btn-57 *, .btn-57 :after, .btn-57 :before, .btn-57:after, .btn-57:before { border: 0 solid; box-sizing: border-box; } .btn-57 { -webkit-tap-highlight-color: transparent; -webkit-appearance: button; background-color: #000; background-image: none; color: #fff; cursor: pointer; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-size: 100%; line-height: 1.5; margin: 0; -webkit-mask-image: -webkit-radial-gradient(#000, #fff); padding: 0; } .btn-57:disabled { cursor: default; } .btn-57:-moz-focusring { outline: auto; } .btn-57 svg { display: block; vertical-align: middle; } .btn-57 [hidden] { display: none; } .btn-57 { background: none; border: 3px solid; border-radius: 999px; box-sizing: border-box; color: #000; display: block; font-weight: 900; -webkit-mask-image: none; padding: 20px 60px; position: relative; text-transform: uppercase; } .btn-57:before { background: #fff; border-radius: 999px; content: ""; inset: 0; position: absolute; transform: translate(10px, 10px); transition: transform 0.2s; z-index: -1; } .btn-57:hover:before { transform: translate(0); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter