My goal is to style my button like this :
However, I'm unsure of the necessary steps to achieve this. Here is my HTML code :
<div class="content" *ngIf="loading==false" >
<div class="product" *ngFor="let product of products$ | async ; let i = index">
<div class="header">
<h1 class="product-name">Product name : {{product.Name}}</h1>
<h2 class="product-id">Product id : {{product.Id}} </h2>
<button (click)="addCanvasModel(product.Id)">Add new Canvas Model</button>
</div>
<div fxLayout="row wrap" fxLayoutGap="3px grid">
<div *ngFor="let model of myObservables[i] | async">
<app-bmc-card-preview [name]="model.Designation" [id]="model.Id" [behaviour_subject]="refreshModels$"></app-bmc-card-preview>
</div>
</div>
</div>
</div>
Here is a snippet of my CSS code:
.product {
background-color: white;
border:1px solid black;
font-family: roboto;
text-align: left;
margin:10px;
}