JSFiddle - React, Tailwind, and code Playground
by AaronLayton
HTML
<button type="button" id="watch-mfu-button" class="yt-uix-button yt-uix-button-default yt-uix-button-toggled">
<span class="yt-uix-button-content">24 videos </span>
<img class="yt-uix-button-arrow" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="">
</button>
<div>Test</div>
CSS
div {
color:#fff;
cursor:pointer;
background-image: -webkit-linear-gradient(top, #B6D3F4, #5483B8);
border-radius: 18px;
width:150px;
height:30px;
line-height:30px;
text-align: center;
}
.yt-uix-button {
height: 2.95em;
padding: 0 .91em;
border: 1px solid;
outline: 0;
font-weight: bold;
font-size: 11px;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.yt-uix-button-default, body .yt-uix-button-default[disabled] {
text-shadow: 0 1px 0 white;
border-color: #CCC #CCC #AAA;
background-color: #E0E0E0;
-moz-box-shadow: inset 0 0 1px #fff;
-ms-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px white;
box-shadow: inset 0 0 1px white;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffafafa,EndColorStr=#ffdcdcdc);
background-image: -moz-linear-gradient(top,#FAFAFA 0,gainsboro 100%);
background-image: -ms-linear-gradient(top,#FAFAFA 0,gainsboro 100%);
background-image: -o-linear-gradient(top,#FAFAFA 0,gainsboro 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,gainsboro));
background-image: -webkit-linear-gradient(top,#FAFAFA 0,gainsboro 100%);
background-image: linear-gradient(to bottom,#FAFAFA 0,gainsboro 100%);
}
.yt-uix-button-default, a.yt-uix-button-default .yt-uix-button-content {
color: #555;
}
.yt-uix-button-default:active, .yt-uix-button-text:active, .yt-uix-button-default.yt-uix-button-active, .yt-uix-button-default.yt-uix-button-toggled, .yt-uix-button-text.yt-uix-button-active, .yt-uix-button-text.yt-uix-button-toggled {
border-color: #888 #AAA #CCC;
-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25),0 1px 0 white;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25),0 1px 0 white;
filter:...