Bootstrap 3 and 4 material buttons with hover effects

Bootstrap
29.11.2017

Most of probably you used the Bootstrap css framework. It is one of the most popular html, css, and js framework used to develop responsive web pages.
But if you want to customize the bootstrap design to look a little more like google material design in this tutorial, you can see how in just a few css changes the bootstrap buttons can already be the in material design.
What you need to do is make this css set up after bootstrap css to override bootstrap's 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);  
}

With this css we turned off the border, reduced the radius, and implemented the material design shadow. It is further necessary for each button to specifically define the color it uses, and to add color and a larger shadow to the hover effect in order to have the appearance of lifting the buttons from the background. Below are examples of bootstrap 3 and bootstrap 4.

Bootstrap 3

Bootstrap 4