.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