.knap { position: relative; width: 203px; height: 42px; padding: 11px; padding-left: 30px; padding-right: 54px; outline: none; cursor: pointer; font-weight: 700 !important; background-color: #AD8350; color: white !important; font-weight: 700; line-height: 42px !important; font-size: 16px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29); border-radius: 5px; &:hover { color: white; background-color: #9B7547; &:before { margin-left: 5px; -moz-transition: 200ms all ease-in-out; -o-transition: 200ms all ease-in-out; -webkit-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out; } } &:before { content: '\f178'; font-family: 'Font Awesome 5 Pro'; font-weight: 400; font-size: 16px; position: absolute; float: right; padding-left: 132px; z-index: 1; -moz-transition: 200ms all ease-in-out; -o-transition: 200ms all ease-in-out; -webkit-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out; } &:focus { outline: none; } }
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