Spacing between Material Buttons

I have two material buttons in my angular application right next to each other. I want to add a little bit of padding between them. But when I add add padding-right to the left button, I end up going from this:

|  button  ||  button  |

To this:

|  button         ||  button  |

But what I want is this:

|  button  |       |  button  |

As @nitin9nair comment, what you need is the margin property, in a style attribute or in a CSS class definition:

<button style="margin-right:20px">Button 1</button> <button>Button 2</button>

If you use flex-layout, you can use the fxLayoutGap directive too.

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px grid"><button>Button 1</button> <button>Button 2</button>