JSFiddle - React, Tailwind, and code Playground
HTML
<button>КНопко</button>
CSS
button {
box-shadow: inset 0px 1px 0px 0px #f7f7f7;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
background-color: #eee;
font-size: 15px;
font-family: MyriadPro;
border-radius: 2px;
border: 1px solid #cecece;
display: inline-block;
width:182px;
height:32px;
position:relative;
text-align:left;
padding-left:10px;
}
button:before {
position:absolute;
display:block;
content: "";
top:0;
right:0;
width:29px;
height:30px;
border-left:1px solid #fff;
background:transparent;
}
button:after {
position:absolute;
display:block;
content: "▼";
line-height:32px;
font-size:12px;
text-align:center;
top:0;
right:0;
width:30px;
height:30px;
border-left:1px solid #cecece;
background:transparent;
}
button:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
background-color: #dfdfdf;
}
button:active {
position: relative;
top: 1px;
}