Membuat Tombol atau Button Mudah Bagi Pemula

 

Hallo Sobat MantapQu kembali lagi di blog Info-MantapQu, Nah pada kesempatan Kali ini saya akan membahas "Membuat Tombol atau Button Mudah Bagi Pemula"

Yuk Pemula Mau Bikin Button Tapi Bingung? Mari Kita Belajar Bersama!

Info-mantapqu.com - Sebagian para pemula bingung dan ingin mempelajari dasar - dasar menjadi Blogger Profesional, di dunia pem-bloggeran design juga hal terpenting karena sebagai unsur estetika atau keindahan karena juga sebagai daya tarik untuk mendapatkan pengunjung.

Tombol atau Button alternatif bagi para blogger untuk menghubungkan satu link dengan link lainya, bukan hanya untuk memperindah tetapi untuk mempermudah pengaksesan pada suatu alamat.

Kotak script yang dipasang itu memiliki bentuk yang sangat unik dan memiliki warna yang sangat menarik sehingga para pembaca atau visitor blog akan nyaman ketika harus melihat kumpulan kode script entah itu HTML maupun javascript yang terkadang membuat mata kita menjadi sakit karena kerumitanya.

Menggunakan kotak script didalam postingan tidak baik jika harus mempastekan langsung sebuah script kedalam postingan. Karena script tanpa kotak tentu akan terlihat tidak beraturan dan tidak rapi dan terkadang akan membuat susunan tulisan dan paragraf postingan yang dibuat kacau. 

Berikut mimin akan bagikan code HTML untuk membuat button lalu mimin akan berikan panduan cara menaruh code tersebut.

Cara Membuat Tombol di Artkel 

1. Copy code html 

2. Masuk ke artikel yang ingin dipost atau New Post

3. Ubah Compose ke Html

Berikut Code Scriptnya :

1. Membuat Tombol tinggal copy paste pada bagian # lalu isi alamat yang ingin digunakan atau bisa tautkan menggunakan link yang ada di blogger

<button><a href="#">Button</a></button>

2. Untuk Code script tinggal di copy dan # untuk url serta code warna 

 

<button onclick="window.location='#' " style="background-color: #7ae6c9; color: white; height: 35px; width: 150px;"><b>Button Simple</b></button></center><center><span style="color: white; font-family: Arial;"><span style="font-size: 13.3333px;"><b><br /></b></span></span>

3. Tombol dengan Layout warna merah

<form action="#" method="get"><input style="background-color: #ff0b2b; color: white;" type="submit" value="BUTTONMERAH" /></form>

4. Tombol dengan Layout warna hijau

<form action="#" method="get"><input style="background-color: #08f755; color: white;" type="submit" value="BUTTONHIJAU" /></form>

5. Tombol dengan Layout warna biru

<form action="#" method="get"><input style="background-color: #032bfb; color: white;" type="submit" value="BUTTONBIRU" /></form>

6. Tombol dengan Layout keren

<a href="#"><button style="align-text: center; background-color: #444444; color: white; font-size: medium; padding: 10px;"><i class="fa fa-eye fa-lg"></i>  DEMO BUTTON</button></a>

7. Menambahkan Efek di Tombol

<div class="container: align-text: center">    <div class="button-container">    <button class="button" type="submit"><span><a href="#">Submit</a></span></button>  </div> </div>