Membuat Tombol Sederhana Dengan CSS

Sering sekali saya melihat artikel yang menyertakan tombol di dalam isi postingnya, baik itu tombol download, maupun tombol demo untuk blog tutorial. Melalui posting kali ini saya akan memberikan tutorial membuat simple button menggunakan CSS.

Cara membuat button

Bagi anda yang belum tahu, sebenarnya membuat tombol di dalam artikel bisa dilakukan hanya dengan memberikan tag <button>, contohnya jika saya akan membuat tombol demo maka yang perlu saya tulis dalam mode HTML adalah <button>Demo</button>, dan hasilnya : . Namun untuk anda yang menyenangi variasi bentuk tombol dalam artikel blog, mudah-mudahan posting saya kali ini membantu anda.

Tombol yang akan saya buat mempunyai tampilan sebagai berikut :
(silahkan hover untuk melihat efek "tertekan")

Download

Untuk membuatnya, silahkan anda menuju ke menu template blog anda, kemudian klik menu sesuaikan, lanjut ke pilihan tingkat lanjut dan tambahkan CSS.

Kemudian paste-kan kode berikut di kolom sebelah kanan :

.tsabtn {
cursor:pointer;
border:2px outset #adb5c9;
background-color:#ffffff;
padding:10px 14px;
-webkit-border-radius:11px;
-moz-border-radius:11px;
border-radius:11px;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
color:#0f090f;
font:normal 18px 'Showcard Gothic',Helvetica,Arial,Sans-Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
}

Untuk menambahkan efek saat tombol di sorot mouse, silahkan anda pastekan kode berikut di bawah kode di atas.

.tsabtn:hover {
border:1px solid #8a8c91;
background-color:#ffffff;
color:#524a52;
}

Kemudian klik tombol terapkan ke blog.

Memasang tombol pada postingan.

Untuk menampilkan tombol tersebut pada postingan dan menjadikannya sebuah link, pada mode HTML, tuliskan kode seperti berikut :

<a href="alamat url tujuan" target="_blank" title="download"><span class="tsabtn">Download</span></a>

Silahkan anda rubah tulisan yang berwarna merah.

Jika anda rasa artikel membuat tombol sederhana dengan CSS ini bermanfaat, jangan lupa untuk berkomentar atau menekan tombol share di bawah artikel ini, atau jika anda mempunyai ide untuk tampilan tombol yang lebih menarik dibanding tombol di atas, silahkan anda beritahu saya melalui kotak komentar, terima kasih.

Artikel Membuat Tombol Sederhana Dengan CSS ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;