<button class="first">DefaultButton</button>
<br><br><br>
<button class="second">DefaultButton</button>
<br><br><br>
<button class="third">DefaultButton</button>
.first {
color: #fff !important;
text-decoration: none;
background: blue;
padding: 20px;
border-radius: 50px;
border: none;
transition: all 0.4s ease 0s;
}

.first:hover {
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

.second {
color: green !important;
background: #ffffff;
padding: 20px;
border: 4px solid green;
border-radius: 6px;
transition: all 0.3s ease 0s;
}

.second:hover {
color: #494949 !important;
border-radius: 50px;
border-color: #494949 !important;
transition: all 0.3s ease 0s;
}

.third {
border: none;
background: black;
color: #ffffff !important;
font-weight: 100;
padding: 20px;
border-radius: 6px;
transition: all 0.3s ease 0s;
}

.third:hover {
color: #404040 !important;
font-weight: 700 ;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.3s ease 0s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.