Ngprime fix the size of buttons

I am building some primeng buttons but they are too big for my project. I have seen in the documentation that I can use

<p-button label="Small" icon="pi pi-check" styleClass="p-button-sm"></p-button>


But as I am using other properties of those buttons, I am using

<button>


instead of

<p-button>


I have tried using styles (width and height) but the text inside the button does not change its size. Is there a way to achieve this? I attach the code of my buttons:

<span class="p-buttonset">
<button pButton pRipple label="Mapa" class="p-button-outlined p-button-secondary"
style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="cambiarTipo(0)" ></button>
<button pButton pRipple label="Satélite" class="p-button-outlined p-button-secondary"
style="background-color: rgba(255, 255, 255, .65); color: darkslategray;" (click)="cambiarTipo(1)"></button>

</span>
&nbsp;

<button pButton pRipple label="Zonas prohibidas" class="p-button-outlined p-button-secondary"
style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="prohibidas()"></button>
&nbsp;<button pButton pRipple label="Ver puntos" class="p-button-outlined p-button-secondary"
style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="mostrarTabla()">
</button>
&nbsp;

<div class="p-inputgroup" >
<p-inputNumber inputStyleClass="black" [(ngModel)]="tiempoIsocronas" mode="decimal" placeholder="Tiempo isocronas"
[useGrouping]="false" [disabled]="lista.length!=1" [inputStyle]="{border:'1px solid darkslategray',background:'rgba(255, 255, 255, .65)'}">
</p-inputNumber> <button pButton pRipple type="button" icon="pi pi-search"
class="p-button-outlined p-button-secondary" (click)="llamarServicio(listaMetodos.isocronas)"
[disabled]="lista.length!=1" style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;">
</button> </div>

Continue reading...