Site icon ParallelCodes

CSS Buttons Effects

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>

Exit mobile version