Nice Hover Effects on Button CSS.

<style type="text/css">

button{
background: #3a7999;
border: none;
color: #f2f2f2;
padding: 10px;
font-size: 18px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
}

.b1:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 42px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}

.b1:Hover:before{
width: 100%;
}

.b2:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}

.b2:Hover:before{
height: 42px;
}

.b3:Hover{
background: rgba(0,0,0,0);
color: #3a7999;
box-shadow: inset 0 0 0 3px #3a7999;
}

@-webkit-keyframes bounce{
0%, 20%, 60%, 100%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
40%{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80%{
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}

.b4:Hover{
-webkit-animation: bounce 1s;
}

.b5:Hover{
transform: skew(-10deg);
}

.b6{
transform-style: preserve- 3d;
}

.b6:after{
top: -100px;
left: 0px;
width: 100%;
position: absolute;
background: #3a7999;
border-radius: 5px;
content: "Flipped";
transforn-origin: left bottom;
transform: rotateX(90deg);
}

.b6:hover{
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}

</style>

<button class="b1">Hover Me</button>
<button class="b2">Hover Me</button>
<button class="b3">Hover Me</button>
<button class="b4">Hover Me</button>
<button class="b5">Hover Me</button>
<button class="b6">Hover Me</button>


Output :)