CSS Buttons Effects

  • by

CSS Buttons Effects
Simple CSS Button Effects. CSS Code below :

See the Pen Hover Button Effects by HITESH VIKANI (@hitesh1120) on CodePen

.css file

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;

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" />

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.