JSFiddle - React, Tailwind, and code Playground
HTML
<style>
.t-button { width: 100%; }
</style>
<div style="border:3px solid; width: 100px;">
<div>
<button type="button" class="t-button">button</button>
</div>
<div>
<a class="t-button">anchor</a>
</div>
<div>
<input type="button" value="input" class="t-button" />
</div>
<div>
<input type="submit" value="submit" class="t-button" />
</div>
<div>
<div class="t-button">div</div>
</div>
</div>
CSS
body
{
font:12px sans-serif;
}
.t-widget,
.t-widget .t-input,
.t-widget .text-box,
.t-button
{
font-size: 100%;
}
html body .t-button
{
text-decoration: none; /*Site.css*/
}
.t-button
{
display: inline-block;
margin: 0;
padding: 2px 6px;
border-width: 1px;
border-style: solid;
border-color:red;
background-color: yellow;
font-family: inherit;
font-size: 100%;
line-height: 1.435;
text-align: center;
cursor: pointer;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
*+html .t-button { display: inline; zoom: 1 }
* html .t-button { display: inline; zoom: 1 }
*+html .t-button { overflow: visible; margin-right: 4px}
* html .t-button { overflow: visible; margin-right: 4px}
*+html a.t-button { line-height: 1.6; padding-left: 7px; padding-right: 7px;/*+1*/ }
* html a.t-button { line-height: 1.6; padding-left: 7px; padding-right: 7px;/*+1*/ }
.t-button-icontext
{
line-height: 1.453;
}
button.t-button::-moz-focus-inner
{
padding: 0;
border: 0;
}
input.t-button::-moz-focus-inner
{
padding: 1px 0;
border: 0;
}
.t-button-expand
{
margin-left: 0 !important;
margin-right: 0 !important;
}
a.t-button-expand
{
display: block;
}
button.t-button-expand
{
width: 100%;
}
body .t-button-icon
{
padding-left: 4px;
padding-right: 4px;
}
*+html a.t-button-icon{padding-left: 5px;padding-right: 5px;}
* html a.t-button-icon{padding-left: 5px;padding-right: 5px;}
.t-button-icontext
{
padding-right: 8px;
overflow: visible; /*IE9*/
}
.t-button-icontext .t-icon
{
margin: 0 3px 0 -3px;
vertical-align: top;
}
*+html .t-button-icontext .t-icon{margin-right: 4px}
* html .t-button-icontext .t-icon{margin-right: 4px}
html body .t-button-bare
{
background: none !important; /*spares long selectors*/
border-width: 0;
}