Thursday, September 19, 2013

Creating Some Impressive Buttons Using CSS


1. BoxCuttor Button
First put this HTML code in your body tag:
<body>
    <form id="form1" runat="server">
        <div>
            <a href="#" class="csharp">C# Sharp</a><br />
        </div>
    </form>
</body>
Now put some CSS in a style sheet:
    csharp {
             1. Put some Shadow:

            -moz-box-shadow: inset 0px 0px 0px 0px #f9eca0;
            -webkit-box-shadow: inset 0px 0px 0px 0px #f9eca0;
            box-shadow: inset 0px 0px 0px 0px #f9eca0;

            2. Now provide some background effect:
           
            background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e) );
            background: -moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
            background-color: #f0c911;

            3. Provide some border radius in all sides:
 
           -webkit-border-top-left-radius: 42px;
            -moz-border-radius-topleft: 42px;
            border-top-left-radius: 42px;

            -webkit-border-top-right-radius: 0px;
            -moz-border-radius-topright: 0px;
            border-top-right-radius: 0px;

            -webkit-border-bottom-right-radius: 42px;
            -moz-border-radius-bottomright: 42px;
            border-bottom-right-radius: 42px;

            -webkit-border-bottom-left-radius: 0px;
            -moz-border-radius-bottomleft: 0px;
            border-bottom-left-radius: 0px;

            4. Some simple CSS code:
            text-indent: 0px;
            border: 3px solid #e65f44;
            display: inline-block;
            color: #c92200;
            font-family: Arial;
            font-size: 18px;
            font-weight: bold;
            font-style: normal;
            height: 59px;
            line-height: 59px;
            width: 133px;
            text-decoration: none;
            text-align: center;
            text-shadow: 0px 0px 0px #ded17c;
        }

            5. Now give some hover effect for our buttons:
 
            .csharp:hover {
                background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911) );
                background: -moz-linear-gradient( center top, #f2ab1e 5%, #f0c911 100% );
                background-color: #f2ab1e;
            }
            
            6. Finally, give some effect for when the button is active:            
            .csharp:active {
                position: relative;
                top: 1px;
            }
Output:
1.PNG

2. Button With Icon
HTML Code
First put this HTML code in your body tag:
        <div>
            <a class="button2 iconImg call" href="#"><span>Call Now!</span></a><br /><br />
        </div>
CSS Code
In this portion of code, we create our basic button design without any effect:
a.button2 {
    border: 1px solid #fff;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 1px 1px 5px rgba(1, 1, 1, 0.5);
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    text-decoration: none;
    padding: 5px 15px;
    background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffffff),color-stop(1, #dbdbdb));
    text-shadow: #fef 0 1px 0;
    float: left;
    margin-bottom: 15px;
    margin-right: 15px;
    color: #497390;
    display: block;
    line-height: 24px;
    font-weight: bold;
    font-size: 20px;
}

Now it's time to give some "hover" and "active" effect for our button:

    a.button2:hover {
        color: #111;
        display: block;
        background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffffff),color-stop(1, #eeeeee));
    }

    a.button2:active {
        text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
        margin-top: 1px;
        background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #dbdbdb),color-stop(1, #ffffff));
    }

Now, we need an icon corresponding to our button's requirements, like here we have a call button, so now we use a call icon and use that image in our CSS:

a.button2 {
    border: 1px solid #979797;
}

    a.button2.iconImg {
        padding-left: 11px;
    }

        a.button2.iconImg span {
            padding-left: 36px;
            background: url(icon1.png) no-repeat 0 5px;
        }

        a.button2.iconImg.call span {
            background-position: 0px -3px;
        }
Now our Call Button is ready to use.
Output:
2.PNG

3. Tabulate Button:
First, we need our HTML Code:
     <div>
         <a href="#" class="button1">Click Me !!</a>
     </div>
CSS Code:
.button1 {

     1. Put some Shadow:

    -moz-box-shadow: inset 0px 0px 50px -14px #fff6af;
    -webkit-box-shadow: inset 0px 0px 50px -14px #fff6af;
    box-shadow: inset 0px 0px 50px -14px #fff6af;

       
    2. Now give some background effect:
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffe066), color-stop(1, #ffab23) );
    background: -moz-linear-gradient( center top, #ffe066 5%, #ffab23 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe066', endColorstr='#ffab23');
    background-color: #ffe066;

       
    3. Provide some border radius for all sides:
 
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;

    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;

    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-right-radius: 0px;

    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-left-radius: 0px;

    4. Some simple CSS code:
   
    text-indent: 2.58px;
    border: 5px solid #b50909;
    display: inline-block;
    color: #333333;
    font-family: Comic Sans MS;
    font-size: 17px;
    font-weight: bold;
    font-style: normal;
    height: 53px;
    line-height: 53px;
    width: 106px;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 2px 1px #ffee66;
}

    5. Now give some hover effect for our button:     
    .button1:hover {
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffe066) );
        background: -moz-linear-gradient( center top, #ffab23 5%, #ffe066 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffe066');
        background-color: #ffab23;
    }
       
    6. Finally, give some effect when the button is active:

    .button1:active {
        position: relative;
        top: 1px;
    }
Output:
3.PNG

4. Stylish Blue
HTML Code:
        <div>
            <a href="#" class="css_btn_class">Submit</a>
       </div>
CSS Code:
In this button we used simple CSS with some "gradient" effect therefore our button is looking more beautiful than before.
1. Provide some simple CSS:
.css_btn_class {
    font-size: 22px;
    font-family: Arial Black;
    font-weight: normal;
    -moz-border-radius: 42px;
    -webkit-border-radius: 42px;
    border-radius: 42px;
    border: 5px solid #82b9f0;
    padding: 8px 19px;
    text-decoration: none;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #8abbeb), color-stop(100%, #2f88e0) );
    background: -moz-linear-gradient( center top, #8abbeb 5%, #2f88e0 100% );
    background: -ms-linear-gradient( top, #8abbeb 5%, #2f88e0 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8abbeb', endColorstr='#2f88e0');
    background-color: #8abbeb;
    color: #ffffff;
    display: inline-block;
    text-shadow: 0px -3px 0px #5691cc;
    -webkit-box-shadow: -1px -6px 20px 9px #c5e0fa;
    -moz-box-shadow: -1px -6px 20px 9px #c5e0fa;
    box-shadow: -1px -6px 20px 9px #c5e0fa;
}

2. Now give some hover effect:
 
    .css_btn_class:hover {
        background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #2f88e0), color-stop(100%, #8abbeb) );
        background: -moz-linear-gradient( center top, #2f88e0 5%, #8abbeb 100% );
        background: -ms-linear-gradient( top, #2f88e0 5%, #8abbeb 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f88e0', endColorstr='#8abbeb');
        background-color: #2f88e0;
    }

    .css_btn_class:active {
        position: relative;
        top: 1px;
    }
Output:
4.PNG
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)