Creating Some Impressive Buttons Using CSS

Introduction

These days creating buttons using CSS is one of the best web design techniques around. There are many examples and tutorials available on the internet. At present, designers are eliminating background images from buttons and using CSS to create beautiful buttons. In this article, you'll learn how to create five beautiful CSS-based buttons that you can use wherever you want. Now let's design our CSS-based buttons.

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{

Step 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;

Step 2. Now provide some background effects.

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;

Step 3. Provide some border radius on 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;

Step 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;
}

Step 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;
}

Step 6. Finally, give some effect for when the button is active.

.csharp:active {
    position: relative;
    top: 1px;
}

Output

Csharp

Button With Icon

HTML Code

<div>
    <a class="button2 iconImg call" href="#"><span>Call Now!</span></a><br /><br />
</div>

First, put this HTML code in your body tag.

CSS Code

In this portion of the 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" effects to 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

Tabulate Button

First, we need our HTML Code.

<div>
    <a href="#" class="button1">Click Me !!</a>
</div>

CSS Code

.button1 {

Step 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;

Step 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;

Step 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;

Step 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;
}

Step 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;
}

Step 6. Finally, give some effect when the button is active.

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

Output

Click me

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 looks more beautiful than before

Step 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;
}

Step 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

Submit

4 Comments

Join the conversation! Your thoughts help the community grow.

Sourav Kumar Das6y ago
Nice article, but please use code editor tool while writing an article with code.
Pavan Ramamurthy13y ago
nice one....
Gyanender Sharma13y ago
Thanks Sir
Destin Joy13y ago
Good Looking Gyanender,The article looks great!!