Vjerovatno vas je većina koristila Bootstrap css framework. On je jedan od najpopularnijih html, css, i js framework koji se koristi za razvoj prilagodljivih (responsive) web stranica. 
No ako želite prilagoditi bootstrap dizajn da izgleda malo više kao google material design u ovom tutorialu možete vidjeti kako u samo nekoliko css izmjena bootstrap tipke već mogu biti material dizajna.
Ono što je potrebno napraviti jest da ovaj css postavite nakon bootstrapa css da bi mogao prepraviti bootstrap-ov css.

.btn{
  border:0px!important;
  border-radius:2px!important;
  transition:all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0,0,0, 0.14), 0 1px 2px rgba(0,0,0,0.24);
  cursor:pointer;
}
.btn-default:hover{
  background-color:#fff;
  box-shadow: 0 10px 20px rgba(0,0,0, 0.19), 0 6px 6px rgba(0,0,0, 0.23);  
}

S ovim css-om smo isključili border, smanjili radius i uključili material dizajn sjenu. Dalje je potrebno za svako dugme posebno definirati boju koju koristi, i boju da zadrži istu na hover i također dodati veću sjenu na hover kako bi imali privid dizanja tipke sa pozadine. Ispod su primjeri za bootstrap 3 i za bootstrap 4.

Bootstrap 3

Bootstrap 4