CSS Buttons Effects
Simple CSS Button Effects. CSS Code below :
See the Pen Hover Button Effects by HITESH VIKANI (@hitesh1120) on CodePen
.css file
.button1
{
background-color: #fff;
overflow: hidden;
width: 250px;
color: #000;
height: 50px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
font-size: 25px;
border-radius:5px;
}
.button1:hover
{
background: #333;
border-left: 5px solid #666;
border-bottom:5px solid #666;
color: #fff;
/** right, bottom blur-ratio over-all distance**/
box-shadow: 0px 2px 70px 2px rgba(0,255,0, 1);
border-radius:45px 45px 45px 45px;
}
.html file
<div style="background-color:#000; padding:50px;"> <input class="button1" type="submit" value="HOVER HERE" /> </div>