1 KB CSS3 Button

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:

<div class="button">
<ul>
	<li><a href="http:\\mhseptiadi.wordpress.com">Button</a></li>
	<li><a href="http:\\mhseptiadi.wordpress.com">Button</a></li>
</ul>
</div>

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.

http://septiadi.com/2011/03/01/1-kb-css3-button/

Advertisements

One response to “1 KB CSS3 Button

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: