Blog > detail

Just my tiny mind

1 KB CSS3 Button

26-2-2012 Admin General 2 Comments

1 KB CSS3 Button

Sometime developers make a mistake by building a website that heavily loaded. The more heavy the website is, the more boring people will wait. In this case, building a light website is important. However, building light website with beautiful layout is more important.


In this article, I try to share how to make a 1 KB CSS3 Button. In this case, we dont need any image and the HTML file size is only 1 KB.


First, we have to declare the css3 style that will be used. Just to keep in mind, not all browser is compatible with CSS3. At least, it is not yet compatible.


The css3 code:


.button li{

display: inline;

margin: 10px;

}


.button li a{

color: white;

text-decoration: none;

padding: 1px 3px;

margin-right: 5px;

border: 1px solid #999;


background: -moz-linear-gradient(center top, #9ffbbb, #90dffb 50%, #0000ff);

-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);

-moz-border-radius: 7px;


background: -webkit-gradient(linear, center top, center bottom, from(#9ffbbb), color-stop(50%, #90dffb), to(#0000ff));

-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);

-webkit-border-radius: 7px;

}


.button li a:hover{

color: red;

background: -moz-linear-gradient(center top, #0000ff, #90dffb 50%, #9ffbbb);

background: -webkit-gradient(linear, center top, center bottom, from(#0000ff), color-stop(50%, #90dffb), to(#9ffbbb));

}


Second, the HTML code it self:



The the button should be like:



The second button is the button where your mouse hover on it. The image I attach is bigger the HTML size :).


Well done,  we just made 1 KB CSS3 Button.


Good luck.

1 KB CSS3 Button 1 KB CSS3 Button 1 KB CSS3 Button

1 KB CSS3 Button 1 KB CSS3 Button 1 KB CSS3 Button

1 KB CSS3 Button

word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

1 KB CSS3 Button

1 KB CSS3 Button

1 KB CSS3 Button