Memilih Elemen Yang Mempunyai Teks Khusus
Untuk memilih elemen yang mempunyai teks tertentu atau kata tertentu, gunakan selector :contains(), dimana teks yang dicari disertakan sebagai parameter untuk memfilter elemen DOM.:

$("p:contains(Another)");

Saat skrip dijalankan pada konsole firebug, hasilnya adalah sebagai berikut:

>>> $("p:contains(Another)");
 [ p.foo ]

Catatan: Fungsi :contains() bersifat case sensitive, yang berarti huruf kapital dan huruf kecil berpengaruh pada hasil pencarian teks. Versi caseinsensitive (kebalikannya) telah ditambahkan pada dokumentasi API dari fungsi :contains() oleh seorang member dari komunitas pengembang jQuery. Untuk keterangn lebih lanjut tentang selector ini, bisa dilihat pada dokumentsi APi di http://api.jquery.com/contains-selector.

Memilih Elemen Yang berisi Elemen Tertentu
Jika kita perlu untuk memilih elemen yang terdapat didalam elemen lain, kita bisa menggunakan filter :has(). Fungsi ini cara kerjanya sama dengan selector :contains(), terkecuali fungsi ini memakai nama elemen (tag) bukan menggunakan teks atau kata:

$("p:has(span)");

Saat dijalankan, hasil eksekusi program adalah sebagai berikut:

>>> $("p:has(span)");
 [ p, p#bar ]

Hanya paragraf yang mempunyai elemen span yang akan terpilih.

Memilih Elemen Yang Kosong

Untuk memilih elemen yang kosong (dalam artian tidak terdapat teks atau elemen lain), fungsi :empty dapat kita gunakan. Pada elemen HTML yang dijadikan contoh pada latihan ini, elemen yang kosong tidak terlihat. Mari kita coba temukan menggunakan filter :empty() untuk menemukan elemen kosong tersebut:

$(":empty");

Hasil outputnya adalah sebagai berikut:

>>> $(":empty");
[ script jsapi, script jquery.min.js, div#_firebugConsole ]

Kedua tag script dan div digenerate secara dinamis. Tag script berasal dari jQuery yang diload oleh Google JSAPI, dan div elemen dari konsol Firebug.

Memilih Elemen Yang Berisi Elemen Atau Teks
Kebalikan dari :empty, :parent akan memilih elemen yang di dalamnya terdapat “sesuatu” yang lain (hahaha, kaya syahroni ), yang dapat berupa elemen lain, teks, atau keduanya. Ketikkan perintah berikut pada konsol firebug:

$("p:parent");

Karena semua elmen paragraf pada contoh yang kita gunakan semuanya berisi elemen atau teks, semua elemen paragraf akan tampil pada konsol firebug, seperti terlihat dibawah ini:

>>> $("p:parent");
 [ p, p.foo, p, p#bar ]

Demikianlah artikel tentang content filters pada jQuery, yaitu :contains(), :has(), :empty, :parent(). Semoga bisa menjadi manfaat bagi yang baca ya

Tag Pembuka File PHP

Permasalahan yang coba saya angkat disini adalah tentang tanda kurung kurawal yang membuka sebuah file PHP. Kode php biasanya di awali dengan simple tag “<?” atau dengan complete tag “<?php”. Sebenarnya tidak ada perbedaan yang signifikan saat berbicara tentang lingkungan development yang tetap. Namun, akan menjadi hal yang cukup merepotkan saat kita menjalankan file PHP yang ditulis menggunakan simple tag pada lingkungan PHP yang tidak mendukung penggunaan simple tag.

Hal ini terjadi pada saya saat mencoba memindah program PHP yang telah saya buat ke komputer dengan setingan PHP yang berbeda. Beberapa waktu yang lalu saya mendapatkan masalah karena program php saya tidak dapat dijalankan. Masalahnya terletak pada tag php yang saya gunakan. Saya menggunakan tag “<?” dan pada xampp terbaru setting php defaultnya yang bisa dijalankan dengan tag “<?php”.

Penggunaan Simple Tag Pembuka File PHP

Untuk mengatasi permasalahan tersebut, berikut cara agar file PHP dengan simple tag bisa berjalan pada lingkungan PHP komputer lain. Agar tag “<?” dapat dijalankan, berikut caranya:

1. Buka file php.ini pada “C:\xampp\php”
2. Kemudian tekan “Control + F” untuk membuka fasilitas find.
3. Cari baris berikut “short_open_tag = off” (tanpa tanda kutip)
4. Setelah itu ganti nilai “off” dengan “on”
5. Kemudian restart apachenya.

Selamat mencoba, semoga bermanfaat.

Magic Method PHP : __toString()

Untuk mencegah error yang mungkin terjadi saat sebuah program mencoba menterjemahkan sebuah class (dalam contoh sebelumnya bernama MyClass), maka jenis magic method yang lain bisa kita gunakan. Magic method tersebut adalah __toString(). Tanpa magic method ini, saat sebuah kelas hendak ditampilkan outputnya akan menimbulkan fatal error. Listing berikut ini akan menampilkan skenario yang dimaksud. Disini digunakan syntax echo untuk menampilkan output dari sebuah objek tanpa menggunakan magic method:

<?php
 class MyClass
 {
    public $prop1 = "I'm a class property!";
    public function __construct()
    {
       echo 'The class "', __CLASS__, '" was initiated!<br />';
    }
    public function __destruct()
    {
        echo 'The class "', __CLASS__, '" was destroyed.<br />';
    }
    public function setProperty($newval)
    {
        $this->prop1 = $newval;
    }
    public function getProperty()
    {
       return $this->prop1 . "<br />";
    }
 }
 // Create a new object
 $obj = new MyClass;
 // Output the object as a string
 echo $obj;
 // Destroy the object
 unset($obj);
 // Output a message at the end of the file
 echo "End of file.<br />";
 ?>

Listing di atas akan menghasilkan tampilan dibawah ini:

The class “MyClass” was initiated!
Catchable fatal error: Object of class MyClass could not be converted to string in 
/Applications/XAMPP/xamppfiles/htdocs/testing/test.php on line 40

Menggunakan Magic Method __toString() dalam PHP

Seperti penjelasan di atas sebelumnya, untuk menampilkan output dari sebuah kelas, gunakan magic method __toString(), seperti pada listing program berikut ini:

<?php
class MyClass
 {
 public $prop1 = "I'm a class property!";
 public function __construct()
 {
 echo 'The class "', __CLASS__, '" was initiated!<br />';
 }
 public function __destruct()
 {
 echo 'The class "', __CLASS__, '" was destroyed.<br />';
 }
 public function __toString()
 {
 echo "Using the toString method: ";
 return $this->getProperty();
 }
 public function setProperty($newval)
 {
 $this->prop1 = $newval;
 }
 public function getProperty()
 {
 return $this->prop1 . "<br />";
 }
 }
 // Create a new object
 $obj = new MyClass;
 // Output the object as a string
 echo $obj;
 // Destroy the object
 unset($obj);
 // Output a message at the end of the file
 echo "End of file.<br />";
 ?>

Pada listing di atas, digunakan magic method __toString(). Perhatikan method getProperty() pada listing di atas. Method tersebut yang dipanggil untuk menampilkan output objek. Saat listing dijalankan, pada browser akan tampil seperti berikut ini:

The class “MyClass” was initiated!
Using the toString method: I’m a class property!
The class “MyClass” was destroyed.
End of file.

Sudah bisa mencerna fungsi dari magic method __toString() kan?. Semoga saja iya

Jenis Magic Method Yang Lain

Sebagai catatan, untuk pembahasan mengenai magic method tidak akan dijelaskan secara lengkap, hanya yang terkadang sering digunakan oleh developer Indonesia saja. Untuk daftar lengkap dan penjelasan tentang magic method yang lain, silahkan kunjungi manual resmi yang dikeluarkan oleh PHP di alamat http://us2.php.net/manual/en/language.oop5.magic.php.

Demikian tutorial kali ini yang membahas tentang salah satu magic method dalam bahasa pemrograman PHP yang sering digunakan, yaitu __toString(). Semoga sharing artikel kali ini bisa bermanfaat bagi teman-teman semua. Selamat malam

Membuat Fungsi PHP Yang Menghasilkan Elemen HTML - Untuk menggenerate sebuah markup dari sebuah fungsi php diperlukan trik khusus agar return yang dihasilkan sesuai dengan yang direncanakan. Bagi yang masih bingung ini akan menjuju kemana arahnya, bayangkan kondisi seperti ini: kita memerlukan sebuah fungsi yang akan menghasilkan skrip HTML dari sebuah proses menggunakan PHP. Kenapa harus dibuat fungsi? Karena markup ini sering kita pakai, jadi daripada menulis satu persatu, lebih baik dibuat sebuah fungsi untuk menanganinya.

Return Elemen HTML

Mungkin juga ada solusi lain yang lebih efektif untuk menangani masalah ini. Namun sebagai seorang nubitol, ternyata otak saya mentok pada solusi ini. So, bagi yang nemu solusi yang lebih efektif diwajibakan share, agar saya tidak berlama-lama dalam jurang kesesatan (lebeeeehhhhh).

Algoritma sudah ditemukan berabad-abad yang lalu, why re-invent the wheel???!!

Sebagai pembuka mari kita perhatikan potongan listing php berikut ini:

<?php 
function TestBlockHTML($replStr) {
<h1></h1>
} 
?> 

Kondisinya sekarang adalah, saya ingin mengembalikan nilai (bukan menampilkan konten – echo ) HTML didalam fungsi di atas. Mungkin kita bisa saja membuat sebuah variabel string yang berisi kode HTML tersebut. Tapi adakah solusi yang lebih efektif dan efisien? Jawabanya tentu bisa dan ada.

Variabel Interpolation

Mari kita uraikan problematika yang sedang kita hadapi. Untuk menuliskan HTML di dalam fungsi di atas, kita bisa gunakan heredoc, yang sudah mendukung variable interpolation. Jika kita gunakan variasi solusi di atas, maka listing yang tadi kita buat bisa kita sederhanakan menjadi:

function TestBlockHTML($replStr) {
     return <<HTML  
<h1>{$replStr}</h1>
HTML;
}

Sesederhana itu bukan? Sekarang tinggal panggil fungsi tersebut pada halaman yang kita inginkan. Sebelumnya mari beri perhatian lebih pada cara penulisan skrip di atas. Ada apa gerangan? Mari kita bahas kawan.

heredoc Identifier

Perhatikan penulisan tanda penutup HTML pada listing di atas. Syntax penutup HTML tersebut tidak lurus terhadap syntax pembukanya. Perlu diketahui, jika kita mengetik kode program pada editor yang sudah modern, tag penutup sebuah syntax biasanya otomastis akan mengikuti indention (tulisan menjorok ke dalam alinea) syntax pembukanya. Hal tersebut dimaksudkan semata-mata supaya program tersebut eye friendly.

Namun pada kasus di atas, penulisan syntax penutup HTML memang sengaja menempel pada batas kiri editor. Hal ini dikarenakan tidak boleh ada white space sebelum tanda closing HTML. Dengan demikian, tanda closing HTML pada listing di atas tidak boleh di indent. Hal yang sama sebenarnya juga berlaku pada syntax pembukanya, <<<HTML heredoc identifier tidak boleh di inden, jika saja tidak ada sesuatu didepanya seperti syntax program “return”.

Parent Class Pada Object Oriented Programing PHP

Selain menambahkan fungsi dan properti baru pada sebuah kelas hasil turunan, kita juga bisa mengganti fungsi atau istilah lainya meng-override sebuah fungsi atau properti pada parent class. Parent class disini adalah kelas orang tua, kelas yang menurunkan sifatnya ke kelas lain. Jika sebuah properti atau fungsi di override di kelas turunan, maka kondisi yang berlaku adalah kondisi fungsi dan properti pada kelas turunan, bukan pada kelas parent.

Untuk melakukan proses overriding properti dan fungsi pada sebuah kelas turunan bisa dilihat pada contoh penggalan listing kelas berikut ini:

<?php
class MyClass
{
   public $prop1 = "I'm a class property!";
   public function __construct()
   {
       echo 'The class "', __CLASS__, '" was initiated!<br />';
   }
   public function __destruct()
   {
       echo 'The class "', __CLASS__, '" was destroyed.<br />';
   }
   public function __toString()
   {
       echo "Using the toString method: ";
       return $this->getProperty();
   }
   public function setProperty($newval)
   {
       $this->prop1 = $newval;
   }
   public function getProperty()
   {
      return $this->prop1 . "<br />;";
   }
}

class MyOtherClass extends MyClass
{
   public function __construct()
   {
      echo "A new constructor in " . __CLASS__ . ".<br />";
   }
   public function newMethod()
   {
      echo "From a new method in " . __CLASS__ . ".<br />";
   }
}

// Membuat objek baru
$newobj = new MyOtherClass;
// Output objek sebagai string
echo $newobj->newMethod();
// Gunakan method dari kelas parent
echo $newobj->getProperty();
?>

Constructor dan Destructor

Skrip di atas adalah contoh dari proses overrriding sebuah kelas. Pertama-tama sebuah class di buat dengan nama MyClass yang berisi satu properti $prop_1 dan beberapa method. Kelas ini mempunyai constructor dan juga destructor. Sebuah kelas standar yang mudah dipahami bahkan oleh programer yang sedang mencoba mencerna apa maksud dari Object Oriented Programing.

Kelas kedua dibuat berdasarkan kelas pertama. Dalam hal ini sifat inheritance digunakan untuk mewariskan sifat-sifat dari kelas pertama. Jika skrip dijalankan, outputnya akan menjadi seperti berikut ini:

A new constructor in MyOtherClass.
From a new method in MyOtherClass.
I’m a class property!
The class “MyClass” was destroyed.

Objek Oriented Programing sangat efektif untuk membuat sebuah program yang terstruktur dengan baik. Jika ada kebingunan, silahkan ditanyakan di form komentar ya, thanks

Tombol Back to Top Blog Menggunakan jQuery

Jika sebuah halaman website mempunyai konten yang banyak, adalah sebuah ide bagus untuk menyediakan tombol untuk menscroll halaman ke atas dengan cepat bagi pengunjung. Pada tutorial kali ini, kita akan membuat efek scroll yang halus untuk kembali ke atas halaman, menggunakan kekuatan sebuah jQuery.

jquery-logo

Pertama-tama, kita akan membuat sebuah tombol dengan posisi fixed, kanan bawah dari halaman, dan saat pengunjung mengklik tombol tersebut, halaman akan menggulung (scroll) ke atas. Proses scroll ini akan menggunakan efek animasi dari jQuery, alih-alih langsung refresh ke atas halaman. Tombol akan dibuat tersembunyi (hidden), dan akan terlihat hanya saat pengunjung meng-scroll halaman ke bawah, sehingga kita tidak perlu menampilkannya terus-menerus.

Skrip Tombol Back to Top Blog Menggunakan jQuery

Skrip HTML Tombol Back to Top

Buatlah sebuah tombol scroll, sehingga saat diklik akan menggulung halaman ke atas. Syntax HTMLnya adalah sebagai berikut:

<a href="#" class="scrollup">Scroll</a>

Sementara untuk syntax CSSnya adalah sebagai berikut:

.scrollup{
	width:40px;
	height:40px;
	opacity:0.3;
	position:fixed;
	bottom:50px;
	right:100px;
	display:none;
	text-indent:-9999px;
	background: url('icon_top.png') no-repeat;
}

Seperti terlihat pada syntax di atas, kita mendefinisikan tombol tersebut fixed (tetap), yaitu 100px dari kanan dan 50px daribawah. Disitu juga ditentukan warna indent dan icon. Syntax text-indent digunkan untuk menyembunyikan text dan icon diletakkan menggunakan metode background. Properti display: none; membuat tombol tidak terlihat pada saat halaman di load.

Skrip Javascript Tombol Back to Top

Sekarang, kita akan membuat tombol terlihat pada saat halaman di scroll ke bawah. Kita bisa melakukan trik ini menggunakan syntax jQuery yang cukup sederhana. Berikut listing javascriptnya:

$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrollup').fadeIn();
		} else {
			$('.scrollup').fadeOut();
		}
	});

Method scrollTop mengambil posisi vertikal terkini dari scroll bar. Jika nilainya lebih dari 100px, tombol dengan class .scrollup akan ditampilkan dengan efek fade in jQuery, selain itu akan menghilang. Jadi, saat kita menggulung (scroll) ke bawah layar halaman lebih dari 100px, tombol akan kelihatan, dan saat di gulung kembali ke atas sampai kurang dari 100px tombol akan disembunyikan.

Langkah selanjutnya adalah menggulung layar otomatis ke atas halaman dengan halus, saat tombol di klik. Kita bisa melakukanya menggunakan fungsi click, berikut listingnya:

$('.scrollup').click(function(){
	$("html, body").animate({ scrollTop: 0 }, 600);
	return false;
	});

Option scrollTop: 0 menggulug vertikal pada posisi 0px, dan angka 600 adalah nilai kecepatan animasinya dalam milidetik. Angka yang lebih tinggi menandakan animasi akan berjalan lebih lambat, karena waktu ditentukan lebih lama. Kita bisa juga menggunakan nilai ‘fast’, ‘slow’ atau ‘normal’ alih-alih menggunakan angka dalam milidetik.

Skrip Lengkap Tombol Back to Top Blog Menggunakan jQuery

Setelah menggabungkan seluruh skrip jQuery di atas hasilnya akan menjadi skrip lengkap jQuery berikut ini:

<script type="text/javascript">
	$(document).ready(function(){ 

		$(window).scroll(function(){
			if ($(this).scrollTop() > 100) {
				$('.scrollup').fadeIn();
			} else {
				$('.scrollup').fadeOut();
			}
		}); 

		$('.scrollup').click(function(){
			$("html, body").animate({ scrollTop: 0 }, 600);
			return false;
		});

	});
</script>

Pada awal berdirinya, BSI hanya membuka jurusan untuk Manajemen Informatika saja, sehingga pada saat ORMIK nanti bisa dipastikan akan lebih dominan Kaos Ormik Merah BSI yangmerupakan ketentuan dari pihak Bina Sarana Informatika yang mengharuskan mahasiswa baru untuk akademi AMIK – yang terdiri dari jurusan Manajemen Informatika dan Komputerisasi Akuntansi – menggunakan kaos berwarna merah dengan logo BSI.

Contoh Kaos Ormik Merah BSI

Seperti telah saya singgung di atas, mahasiswa Bina Sarana Informatika paling banyak berasal dari jurusan Manajemen Informatika dan Komputerisasi Akuntansi. Oleh sebab itu, berikut saya posting contoh kaos ormik merah BSI untuk para mahasiswa baru BSI.

Contoh kaos ormik merah gambar blogger

Kaos ormik BSI di atas bergambar seorang blogger yang sedang berada di toilet. Makna dari disen kaos ini adalah bahwa kita sebagai blogger bisa sangat antusias melakukan hobi kita, sehingga saat berada di toilet pun kita tetap membawa laptop. Hal ini sesuai dengan tema mahasiswa AMIK BSI yang dalam proses belajarnya akan sangat sering menggunakan laptop (atau komputer).

Berikut penampakan contoh kaos ormik merah BSI yang lain. Pada gambar di bawah, kaos yang digunakan menggunakan model kaos polo. Seorang mahasiswa baru BSI membeli sendiri kaos tersebut, lalu kami tinggal membuat sablon logo BSI diameter 5cm saja.

kaos ormik merah bsi model polo

Contoh Kaos Ormik Kuning BSI

Untuk mahasiswa baru BSI jurusan Broadcasting, kaos yang digunakan untuk ormik nanti berwarna kuning. Bukan hanya jurusan Broadcasting yang menggunakan kaos ormik warna kuning, tetapi semua jurusan yang ada di dalam AKOM BSI. Berikut salah satu contoh kaos ormik bsi warna kuning.

kaos ormik bsi warna kuning

Tema kaos jurusan AKOM di atas adalah photography. Kenapa? Karena broadcasting juga tidak bisa lepas dari peran dokumentasi. Tidak hanya masalah video dan sinyal untuk menyiarkan (broadcast) pesan yang akan diterima masyarakat, tetapi juga ada aspek visual.

Sebenarnya kami mengajukan disen logo onair, hanya saja kaos tersebut di upload di facebook TokoNano.com. Bila inginmelihatnya silahkan di like page dari TokoNano.com. Selain itu di fans page TokoNano.com tersebut juga banyak testimoni dan juga disen-disen kaos dari jurusan yang lain.

kaos ormik bsi kuning jurusan broadcasting

Contoh Kaos Ormik Ungu BSI

Warna ungu menjadi milik mahasiswa baru BSI jurusan Bahasa Ingris, Bahasa Mandarin dan bahasa asing lainya. Jurusan-jurusan trersebut bernaung dalam Akademi Bahasa Asing (ABA) BSI. Ungu juga termasuk kaos yang banyak kami produksi, diantara sekian banyak kaos ormik bsi warna ungu yang sudah kami produksi salah satu disenya adalah logo Captain America seperti di bawah ini.

kaos ormik bsi ungu captain america

Captain America kami pilih karena dia menggunakan bahasa asing (American English), sehingga relevan dengan jurusan yang mahasiswa ambil, hehe. Disamping itu juga pada saat pemilihan disen, film The Avenger – yang salah satu superheronya adalah Captain America – sedang ditayangkan di bioskop-bioskop di Indonesia.

kaos ormik bsi ungu

Demikian beberapa kaos ormik BSI yang sudah TokoNano.com produksi, selain disen dan warna kaos di atas masih banyak lagi contoh yang kami produksi, selengkapnya silahkan berkunjung ke fanspage TokoNano.com

Untuk pemesanan bisa sms ke 0888 0987 2533 atau pin BB 313EF23C atau lebih jelasnya ke halaman tentang jual kaos ormik BSI. Terimakasih

Contoh penggunaan dasar syntax border-radius adalah:

border-radius: 10px;

Kita juga bisa menggunakan % sebagai satuan ukur, sebagai contoh:

border-radius: 10%;

Namun, saat kita perlu untuk menambah prefix browser, kita bisa menggunakan property berikut ini:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 border-radius: 10px;

Contoh Penerapan Property border-radius

Berikut beberapa penerapan syntax border-radius dalam berbagai studi kasus.

Ukuran sama untuk semua sudut

Jika hanya satu nilai yang didefinisikan pada boder-radius, nilai tersebut akan diterapkan untuk semua sudut:

#box1{</pre>
        /*General box properties*/
	background-color:#7AE840;
	width: 200px;
	padding:10px;
	margin:20px;
	height:50px
	/* using border-radius */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

Hasil dari syntax CSS di atas adalah sebagai berikut:

Radius pada kiri atas dan kanan bawah

Properti border-radius dapat menerima dua nilai. Jika yang diseting adalah dua nilai, maka nilai tersebut akan diaplikasikan pada kiri atas ke kanan atas dan kanan bawah ke kiri bawah.

#box2{
        /*General box properties*/
	background-color:#7AE840;
	width: 200px;
	padding:10px;
	margin:20px;
	height:50px
	/* using border-radius */
	-webkit-border-radius: 24px 0;
	-moz-border-radius: 24px 0;
	border-radius: 24px 0;
	}

Hasil dari syntax di atas adalah:

Radius pada kanan atas dan kiri bawah

Dengan cara yang sama, contoh berikut ini menseting border-radius untuk sudut kanan atas dan kiri bawah.

#box3{
       /*General box properties*/
	background-color:#7AE840;
	width: 200px;
	padding:10px;
	margin:20px;
	height:50px
	/* using border-radius */
	-webkit-border-radius: 0 24px;
	-moz-border-radius: 0 24px;
	border-radius: 0 24px;
	}

Output dari syntax di atas adalah:

Radius yang berbeda untuk masing-masing sudut

Kita bisa menggunakan bentuk singkat untuk syntax border-radius, sama seperti syntax margin dan padding untuk menentukan  border-radius yang berbeda untuk masing-masing sudut.

#box4{
	/*General box properties*/
	background-color:#7AE840;
	width: 200px;
	padding:10px;
	margin:20px;
	height:50px
	/* using border-radius */
	-webkit-border-radius:  5px 20px 40px 60px;
	-moz-border-radius:  5px 20px 40px 60px;
	border-radius:  5px 20px 40px 60px;
	}

Output syntax CSS3 di atas adalah sebagai berikut:

Demikian tutorial kali ini tentang Membuat Sudut Tumpul Dengan CSS3 semoga bermanfaat bagi yang sedang mendalami CSS3, buat para master ya mohon koreksinya aja ya

Penggunaan Dasar Membuat Tombol Dengan CSS3

Pertama-tama kita membuat class button sebagai dasar, tanpa warna apapun, sehingga kita bisa menggunakanya nanti dengan penerapan berbagai macam warna. Syntax css nya adalah sebagai berikut:

.button {
	font-family: sans-serif;
	font-weight:bold;
	color: #fff;
	padding:5px 10px 6px 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
	cursor: pointer;
	}

Pada kode css di atas, kita membuat border radius dengan syntax border-radius untuk mozilla, webkit dan internet explorer. Untuk info lebih lanjut tentang  border-radius property, silahkan ke border radius css3

Menambahkan Warna Berbeda Pada Tombol Dengan CSS3

Sekarang kita sudah mempunyai basic css untuk tombol radius, kita bisa menggunakannya kembali dalam beberapa kombinasi warna, yang kadang kita perlukan saat kita membutuhkan tombol yang sama dengan warna berbeda. Kita bisa melakukannya dengan mudah menggunakan syntax background color, tetapi untuk lebih memperluas wawasan tentang css3, kita akan menggunakan syntax CSS3  linear-gradient untuk membuat efek gradien pada tombol. Perhatikan contoh berikut ini:

.blue {
	background:#0085cc;
	background-image: -moz-linear-gradient(top,#0085cc,#00717f);
	background-image: -webkit-gradient(linear,left top,
left bottom,from(#0085cc),to(#00717f)	);
	}

Pada syntax CSS3 di atas, kita membuat gradien sederhana untuk Mozilla dan Webkit browser. Kita juga menambahkan simple background untuk browser yang tidak mendukung property gradien. Untuk mempelajari lebih lanjut tentang gradien pada CSS3, silahakan ke Gradasi Warna CSS3

Untuk properti hover, kita bisa menentukan warna background sederhana, atau jika mau kita bisa memakai gradien yang sama untuk hover.

	.blue:hover{background:#00717f;	}

Dengan cara yang sama, kita bisa membuat class untuk warna berbeda menggunakan warna yang kita pilih. Silahkan lihat halaman demo untuk pemahaman lebih lanjut.

Menentukan Ukuran Tombol Dengan CSS3

Kita juga bisa menentukan class untuk ukuran tombol yang berbeda-beda. Yang harus kita lakukan adalah menentukan ukuran huruf memakai properti font-size.

.small {font-size:12px;}
.medium{font-size:18px;}
.large{font-size:24px;}

Cara Membuat Tombol Dengan CSS3 Dalam HTML

Tombol dapat kita terapkan pada halaman html menggunakan syntax berikut:

<a class="button large blue">Click me!</a>
<a class="button medium blue">Click me!</a>
<a class="button small blue">Click me!</a>

Syntax CSS3 di atas semua telah diuji pada browser-browser berikut: