<html>
<head>
<style>
/* Material style */
button {
    background-color: rgb(255, 87, 51);
    padding: 10px 40px;
    color: #FFF;
    border: #739690 1px solid;
    border-radius: 4px;
    cursor: pointer;
	font-size :20px;
}
.button1 {
  background: #FF5733;
}
.button2 {
  background: #DAF7A6;
}
.button3 {
  background: #FF00BD;
}
.button4 {
  background: #900C3F;
}


/* Ripple magic */
button{
  position: relative;
  overflow: hidden;
  margin :10px;
}



</style>
</head>

<body>
 
<button class="button1" >Click Me...</button>
<button class="button2" > Click Me...</button>
<button class="button3"> Click Me...</button>
<button class="button4"> Click Me...</button>

</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.