Cara membuat tombol button link di postingan blog

Membuat Design Tombol Bergaya Flat Dengan CSS dan HTML ataupun Membuat tampilan button / submit supaya lebih kelihatan menarik dapat dilakukan dengan meletakan kode kode tertentu untk menghasilkan tombol Button.Beberapa fungsi Tombol Button pada postngan blog yakni srbagai tombol download, bisa juga dijadikan sebagai tombol button perujuk kepada link halaman lain, dan masih sangat banyak fungsi dari tombol button ini.Cara Membuat Tombol Button disertai Link URL blog Keren didalam Postingan Blog merupakan cara yang sangat mudah sekali .

Untuk dapat membuat tombol push button cantik menarik dan terlihat keren dengan link href sendiri dapat dilakukan dengan banyak cara salah satunya dengan meletakan kode Css pada postingan, kode HTML dan kode kode lainnya serta kita bisa menambahkan sedikit sentuhan warna pada tombol button tersebut agar lebih keren dan menarik.

Oke tanpa memperpanjang waktu kita silahkan simak cara membuat tombol button link di postingan blog

Cara membuat tombol button link di postingan blog

pada dasarnya Tag HTML pada button adalah seperti ini

<button>INI BUTTON</button>

maka akan menjadi seperti ini :

INI BUTTON

Tombol button diatas merupakan tombol single button tanpa adanya link karna diatas merupakan tombol kode HTML dasar button, untuk itu sekarang mari kita simak cara menambahkan link didalam button tersebut serta memberi beberapa sentuhan css didalamnya

1. Cara membuat tombol button single link di postingan blog

a. Button single link

INI BUTTON

Kode HTML nya :

<button>INI BUTTON</button>

2. Cara membuat tombol button link di postingan blog

b. Button dengan link

INI BUTTON

Kode HTML nya :

<a href="http://jagoankode.blogspot.com/"><button>INI BUTTON</button></a>

Jika button diatas diklik maka akan terbukalink https://jagoankode.blogspot.com

3. Cara membuat tombol button link New tab postingan blog

c. Button dengan link new tab(Button jika diklik membuka tab baru)

INI BUTTON

Kode HTML nya :

<a href="https://jagoankode.blogspot.com/" target="_blank"><button>INI BUTTON</button></a>

Jika button diatas diklik maka akan terbukalink http://jagoankode.blogspot.com pada tab baru

4. Cara membuat tombol button link warna di postingan blog

d. Button dengan link warna MERAH

Kode HTML nya :

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

e. Button dengan link warna HIJAU

Kode HTML nya :

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

f. Button dengan single link warna BIRU

Kode HTML nya :

<form method="get" action="http://_URL_ANDA_">
<input style="background-color: #032bfb; color: #fff;" type="submit" value="BUTTONHIJAU" /></form>

Anda dapat mengganti warna background-color: #032bfb dengan warna kesukaan anda dan jangan lupa mengisi url target anda.

5. Cara membuat tombol button dengan gaya flat css

pertama buatlah sebuah link seperti ini :

<a href="#" class='tombols'>INIBUTTON</a>

lalu tambahkan sentuhan cssnya seperti ini :

.tombols{
background:#2C97DF;
color:white;
border-top:0;
border-left:0;
border-right:0;
border-bottom:5px solid #2A80B9;
padding:10px 20px;
text-decoration:none;
font-family:sans-serif;
font-size:11pt;
}

Oke demikianlah tutorial admin mengenai Cara membuat tombol button link di postingan blog semoga membantu anda 😀