February 15, 2014 / IST / How-to Guides, Web Development.

Are you using image button to display “Demo”,“Download” ,”Read More” or whatever. Image button is not good practice to use on website. Image button increase “http://” request. Each http request demands server to fulfill the requirement. Suppose you have five image buttons and each button has different colour. Then your website will request more five http request. If your server response time is less then more http requests make webpage landing process slow and your site will be very slow. It also steel bandwidth.

To overcome from this problem you use CSS button to design. I think it is more suitable than image button. Here, I am giving some example then very easy CSS script:

Example 1 Example 2 Example 3

How to implement

For implementation you have to know basic HTML script. Or copy below script and change according to you.

The HTML part is:

<a class="example1" href="#">Example 1</a>
<a class="example2" href="#">Example 2</a>
<a class="example3" href="#">Example 3</a>

The CSS part is:

.example1 {
margin-right:20px;
border-top:1px solid #96d1f8;
background:0;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;
box-shadow:rgba(0,0,0,1) 0 1px 0;
text-shadow:rgba(0,0,0,.4) 0 1px 0;
color:white;
font-size:19px;
font-family:Georgia, serif;
text-decoration:none;
vertical-align:middle;
padding:10px 20px;
}

.example1:hover {
border-top-color:#28597a;
background:#28597a;
color:#ccc;
}

.example1:active {
border-top-color:#1b435e;
background:#1b435e;
}

.example2 {
margin-right:10px;
border-top:1px solid #0df71c;
background:0;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;
box-shadow:rgba(0,0,0,1) 0 1px 0;
text-shadow:rgba(0,0,0,.4) 0 1px 0;
color:white;
font-size:19px;
font-family:Georgia, serif;
text-decoration:none;
vertical-align:middle;
padding:10px 20px;
}

.example2:hover {
border-top-color:#187306;
background:#187306;
color:#ccc;
}

.example2:active {
border-top-color:#3a5c1b;
background:#3a5c1b;
}

.example3 {
border-top:1px solid #ffc800;
background:0;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;
box-shadow:rgba(0,0,0,1) 0 1px 0;
text-shadow:rgba(0,0,0,.4) 0 1px 0;
color:white;
font-size:19px;
font-family:Georgia, serif;
text-decoration:none;
vertical-align:middle;
padding:10px 20px;
}

.example3:hover {
border-top-color:#ba6102;
background:#ba6102;
color:#ccc;
}

.example3:active {
border-top-color:#a34002;
background:#a34002;
}

Create CSS Button Download

Tags:


Share this: