user9999 user9999 - 7 months ago 32
HTML Question

Change the look & feel of button

we have a button, its displaying like this :

enter image description here

we want to display like :

enter image description here



.saveall
{

text-transform: capitalize;

font-weight: bold;
float: left;
text-align: center;
color: #fff;

background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab,Arial,Helvetica,sans-serif;
overflow: visible;
width: auto;
cursor: pointer;
vertical-align: middle;

display: inline-table;
padding: 9px;
position: relative;

margin-left: 6px;
margin-right: 6px;

}

<button class="saveall" title="Save all'" type="button" style="float: left;padding: 5px 5px 5px 0;" onclick="changeaction()" id="mass_update_butn">
<span><span>Invoice</span></span>
</button>





Please help me to find solution

thanks in advance

Answer

Seems simple enough.

Remove the inline styling and the border, then tweak the padding.

Those inner spand aren't really necessary unless you have a particular reason for having them.

.saveall {
  text-transform: capitalize;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: #3fbdf7;
  font: 500 14px/1.35 Roboto Slab, Arial, Helvetica, sans-serif;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  padding: 6px 24px;
  position: relative;
  border: none;
}
<button class="saveall" title="Save all'" type="button" onclick="changeaction()" id="mass_update_butn">
  Invoice
</button>