Web Application

Drop Shadow With CSS3 For All Web Browsers

.shadow { 
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
 }

The Combined Styles For All Web Browser Support

.shadow {
-moz-box-shadow: 3px 3px 4px #000;
 -webkit-box-shadow: 3px 3px 4px #000; 
 box-shadow: 3px 3px 4px #000;
 /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
 /* For IE 5.5 - 7 */ 
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
}

How to make buttons with hover effect using CSS

Contact Us


Source Code:

    #button {
        width: 200px;
        height: 60px;
        line-height: 60px;
        color: white;
        text-decoration: none;
        font-size: 30px;
        font-family: helvetica, arial;
        font-weight: bold;
        display: block;
        text-align: center;
        position: relative;
        padding:10px 40px; 
        color:#eee; 
        font-family:arial, san-serif; 
        font-weight: bold; 
        text-decoration: none; 
        border:solid 1px rgba(0,0,0,0.4); 
        text-shadow: #000 1px 1px 2px; 
        background:#ff0000; 
        border-radius: 3px; 
        -webkit-border-radius: 3px; 
        -moz-border-radius: 3px;
        box-shadow: 0px 1px 3px #000, inset 0px 0px 5px #fff; 
        -o-box-shadow: 0px 1px 3px #000, inset 0px 0px 5px #fff; 
        -webkit-box-shadow: 0px 1px 3px #000, inset 0px 0px 5px #fff; 
        -moz-box-shadow: 0px 1px 3px #000, inset 0px 0px 5px #fff;
        background-image: gradient(center bottom, #cc0000 29%, #ff0000 80%); 
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.29, #cc0000), color-stop(0.80, #ff0000)); 
        background-image: -moz-linear-gradient(center bottom, #cc0000 29%, #ff0000 80%);
    }
    /* WHILE HOVERED */
    #button:hover {
        border:1px solid #b30808; background-color: #e40a0a;
         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e40a0a), color-stop(100%, #9f0202));
         background-image: -webkit-linear-gradient(top, #e40a0a, #9f0202);
         background-image: -moz-linear-gradient(top, #e40a0a, #9f0202);
         background-image: -ms-linear-gradient(top, #e40a0a, #9f0202);
         background-image: -o-linear-gradient(top, #e40a0a, #9f0202);
         background-image: linear-gradient(top, #e40a0a, #9f0202);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e40a0a, endColorstr=#9f0202);
    }
    /* WHILE BEING CLICKED */
    #button:active {
        color:#eee; 
        background:#ee0000;
        box-shadow: 0px 1px 1px #000, inset 0px 0px 5px #fff; 
        -o-box-shadow: 0px 1px 1px #000, inset 0px 0px 5px #fff; 
        -webkit-box-shadow: 0px 1px 1px #000, inset 0px 0px 5px #fff; 
        -moz-box-shadow: 0px 1px 1px #000, inset 0px 0px 5px #fff;
        transform: scale(0.95, 0.95); 
        -moz-transform: scale(0.95, 0.95); 
        -o-transform: scale(0.95, 0.95); 
        -webkit-transform: scale(0.95, 0.95);
    }
    /* FONT GLYPH (MOSTLY FOR FUN) */
    #button:before {
        font-family: EfonRegular;
        content: url(images/message.png);
        color: #09232F;
        font-size: 90px;
        float: left;
        margin-left: -20px;
        margin-top: 10px;
        margin-right: 10px;
        text-shadow: 0 1px 0 #4190AF;
    }