Aussehen & Feel Taste

Question

wir einen Knopf haben, es ist wie diese Anzeige:

.saveall 
 
{ 
 
\t 
 
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>

:

wir wie angezeigt werden sollen

Bitte helfen Sie mir Lösung zu finden

Dank im Voraus

Answer 1

einfach genug zu sein scheint.

Entfernen Sie das Inline-Styling und den Rahmen und optimieren Sie dann das Padding.

Diese inneren spand sind nicht wirklich notwendig, es sei denn, Sie haben einen bestimmten Grund, sie zu haben.

.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>

Answer 2

Versuchen Sie, diese

button { 
 
    border: none; 
 
    background: #3FBDF7; 
 
    color: white; 
 
    font-size: 13px; 
 
    font-weight: bold; 
 
    padding: 5px 25px; 
 
}

<button>Invoice</button>