membuat button menggunakan css3

Membuat Button Menggunakan CSS3

by

CSS3 memiliki banyak kelebihan dibandingkan dengan CSS versi sebelumnya.

CSS3 mampu  memberikan detail yang lebih baik pada objek yang diberikan style. CSS3 juga mendukung animasi terhadap suatu objek tertentu.

Misalnya saja  dulu ketika ingin membuat button dengan tampilan menarik, biasanya digunakan gambar sebagai background nya. Saat ini, hal tersebut tidak perlu dilakukan, karena telah ada fitur CSS3 yang mendukung kebutuhan tersebut.

Membuat Button Menggunakan CSS3

Saat ini banyak website yang menyediakan fasilitas generator untuk membuat button menggunakan CSS3 salah satunya adalah CSS3Button.

Website tersebut memudahkan kita untuk membuat button sehingga lebih mudah dalam mendesain dan membuat CSS dari website yang sedang kita kembangkan.

Berikut ini adalah contoh button yang dibuat menggunakan CSS3 melalui website tersebut.

 

Untuk code nya tentu saja dapat digunakan di dalam file CSS kita. Cukup copy paste source html button dan CSS3 nya saja.

Untuk button:

<button class="css3button" name="" type="button" value="">submit</button>

Untuk CSS3 nya:

<style type="text/css">
button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 11px 19px;
	background: -moz-linear-gradient(
		top,
		#42aaff 0%,
		#003366);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#42aaff),
		to(#003366));
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #003366;
	-moz-box-shadow:
		0px 1px 6px rgba(000,000,000,0.6),
		inset 0px 0px 2px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 6px rgba(000,000,000,0.6),
		inset 0px 0px 2px rgba(255,255,255,0.5);
	box-shadow:
		0px 1px 6px rgba(000,000,000,0.6),
		inset 0px 0px 2px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(020,019,020,0.7),
		0px 1px 0px rgba(242,239,242,0.3);
}
</style>

Semoga bermanfaat.

Leave a Comment