CSS Buttons Effects

  • by

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

[codepen_embed height=300 theme_id=1 slug_hash=’dodxWM’ user=’hitesh’ default_tab=’result’ animations=’run’]
See the Pen Hover Button Effects by HITESH VIKANI (@hitesh1120) on CodePen
[/codepen_embed]

.css file
[css]
.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;

}
[/css]

.html file
[html]
<div style="background-color:#000; padding:50px;">

<input class="button1" type="submit" value="HOVER HERE" />
</div>

[/html]


  1. Base64Encode.io - Realtime Encode your string to Base64 format.
  2. Base64Decode.io - Realtime Decode Base64 data to plain text.
  3. Md5Hash.io - Realtime Encoding in Md5Hash.

Leave a Reply

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