pill buttons

Change look and feel standard buttons

html
<Pre style="margin-left:500px">
Button     <span class='pill button'> <SpotfireControl id="baef049d975f4210af51b20c9a1c60b7" /> </span><br/>
Switch      off <span class='pill switch'>  <SpotfireControl id="0351da843e684914ab3978b18b0bade6" />  </span> on<br/>
Dropdown    <span class='pill dropdown'> <SpotfireControl id="afdad0889d0b4f00b3e72cbc7827a88c" /></span>
</Pre>

<style>
.pill{
 white-space:pre;
 cursor: pointer;
 background: #efefef;  
 border-radius: 100px;
}

.pill:hover {
 background: #fff;  
}

.switch{ border:1px inset #dfdfdf;}
.button, .dropdown{ border:1px outset #dfdfdf;}
.button:active, .dropdown:active{ border:1px inset #dfdfdf;}

.pill.dropdown .sf-element-dropdown,
.pill.dropdown .sf-element-dropdown:hover
{
border:none;
background-image:none;
}

.sf-element.sf-element-control.sfc-action.sfc-action-button
{
border:none;
background-image:none;
}

.sf-element.sf-element-control.sfc-action.sfc-action-button.sfpc-active
{
border:none;
background-image:none;
}
</style>