Mempercantik Link Dengan Button Bootsrap

Cara Mempercantik Link Dengan Button Bootsrap - Melihat dari blog tetangga ada yang menggunakan button pada link downloadnya, jadi saya tertarik untuk memasangnya juga, tapi button yang ini menggunakan css bootstrap.

Bootsrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Untuk lebih jelasnya silahkan sobat kunjungi situsnya, atau jika belum jelas dengan screnshoot yang saya berikan silahkan lihat demonya disini

Bagaimana cara memasangnya diblog?
Tentu sangat menarik jika kita pasang diblog,untuk langkah-langkahnya silahkan sobat ikuti sebagai berikut:

Copas Code berikut kemudian simpan dihosting sobat, misalnya menggunakan google drive, tapi jika mau menggunakan milik saya gag apa-apa!
btn.min.css

button{font-size:14px;font-weight:normal;line-height:20px;}
button{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}

.btn{display:inline-block;*display:inline;*zoom:1;padding:4px 12px;margin-bottom:0;font-size:14px;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);background-image:linear-gradient(to bottom, #ffffff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#e6e6e6;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border:1px solid #cccccc;*border:0;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*margin-left:.3em;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);}.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{color:#333333;background-color:#e6e6e6;*background-color:#d9d9d9;}
.btn:active,.btn.active{background-color:#cccccc \9;}
.btn:first-child{*margin-left:0;}
.btn:hover,.btn:focus{color:#333333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;}
.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}
.btn.disabled,.btn[disabled]{cursor:default;background-image:none;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn-large{padding:11px 19px;font-size:17.5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn-large [class^="icon-"],.btn-large [class*=" icon-"]{margin-top:4px;}
.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn-small [class^="icon-"],.btn-small [class*=" icon-"]{margin-top:0;}
.btn-mini [class^="icon-"],.btn-mini [class*=" icon-"]{margin-top:-1px;}
.btn-mini{padding:0 6px;font-size:10.5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn-block{display:block;width:100%;padding-left:0;padding-right:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.btn-block+.btn-block{margin-top:5px;}
input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%;}
.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active{color:rgba(255, 255, 255, 0.75);}
.btn-primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#006dcc;background-image:-moz-linear-gradient(top, #0088cc, #0044cc);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));background-image:-webkit-linear-gradient(top, #0088cc, #0044cc);background-image:-o-linear-gradient(top, #0088cc, #0044cc);background-image:linear-gradient(to bottom, #0088cc, #0044cc);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);border-color:#0044cc #0044cc #002a80;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#0044cc;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#ffffff;background-color:#0044cc;*background-color:#003bb3;}
.btn-primary:active,.btn-primary.active{background-color:#003399 \9;}
.btn-warning{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#faa732;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(to bottom, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#f89406;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{color:#ffffff;background-color:#f89406;*background-color:#df8505;}
.btn-warning:active,.btn-warning.active{background-color:#c67605 \9;}
.btn-danger{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#da4f49;background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);background-image:linear-gradient(to bottom, #ee5f5b, #bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#bd362f;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{color:#ffffff;background-color:#bd362f;*background-color:#a9302a;}
.btn-danger:active,.btn-danger.active{background-color:#942a25 \9;}
.btn-success{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#5bb75b;background-image:-moz-linear-gradient(top, #62c462, #51a351);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));background-image:-webkit-linear-gradient(top, #62c462, #51a351);background-image:-o-linear-gradient(top, #62c462, #51a351);background-image:linear-gradient(to bottom, #62c462, #51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#51a351;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{color:#ffffff;background-color:#51a351;*background-color:#499249;}
.btn-success:active,.btn-success.active{background-color:#408140 \9;}
.btn-info{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top, #5bc0de, #2f96b4);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));background-image:-webkit-linear-gradient(top, #5bc0de, #2f96b4);background-image:-o-linear-gradient(top, #5bc0de, #2f96b4);background-image:linear-gradient(to bottom, #5bc0de, #2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#2f96b4;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{color:#ffffff;background-color:#2f96b4;*background-color:#2a85a0;}
.btn-info:active,.btn-info.active{background-color:#24748c \9;}
.btn-inverse{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#363636;background-image:-moz-linear-gradient(top, #444444, #222222);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));background-image:-webkit-linear-gradient(top, #444444, #222222);background-image:-o-linear-gradient(top, #444444, #222222);background-image:linear-gradient(to bottom, #444444, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);border-color:#222222 #222222 #000000;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#222222;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-inverse:hover,.btn-inverse:focus,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{color:#ffffff;background-color:#222222;*background-color:#151515;}
.btn-inverse:active,.btn-inverse.active{background-color:#080808 \9;}
button.btn,input[type="submit"].btn{*padding-top:3px;*padding-bottom:3px;}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0;}
button.btn.btn-large,input[type="submit"].btn.btn-large{*padding-top:7px;*padding-bottom:7px;}
button.btn.btn-small,input[type="submit"].btn.btn-small{*padding-top:3px;*padding-bottom:3px;}
button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-bottom:1px;}

Atau menggunakan milik saya, letakkan kode berikut ini di atas </head> didalam template sobat

<link href="https://googledrive.com/host/0Bzor_26WINEWVWYxOEU5RkJINWs/btn.min.css" rel="stylesheet" media="screen">

Cara Memanggil code di dalam artikel:
Pada saat membuat Entri/Post baru silahkan sobat pilih tab HTML bukan Compose, pada bagian tag link a tambahkan script class button seperti ini

<a href="#" class="btn btn-primary"> DOWNLOAD</a>

Untuk listnya silahkan sobat liat code ini, ini adalah code dari Demo

<html lang="en">
<head>
	
	<title>Button</title>
	
	<link href="https://googledrive.com/host/0Bzor_26WINEWVWYxOEU5RkJINWs/btn.min.css" rel="stylesheet" media="screen">
</head>

<body>

<a href="http://ilkomunived.blogspot.com/" target="_blank" class="btn"> LINK1</a>
<a href="http://ilkomunived.blogspot.com/" target="_blank" class="btn btn-primary"> LINK1</a>
<a href="http://ilkomunived.blogspot.com/" target="_blank" class="btn btn-info"> LINK1</a>
<a href="http://ilkomunived.blogspot.com/" target="_blank" class="btn btn-success"> LINK1</a>
<a href="http://ilkomunived.blogspot.com/" target="_blank" class="btn btn-warning"> LINK1</a>
<a href="http://ilkomunived.blogspot.com/" target="_blank" class="btn btn-danger"> LINK1</a>
<a href="http://ilkomunived.blogspot.com/" target="_blank" class="btn btn-inverse"> LINK1</a>

<p>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-large" type="button">Large button</button></a></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-large btn-primary" type="button">Large button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-large  btn-info" type="button">Large button</button>  </a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-large  btn-success type="button">Large button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-large  btn-warning" type="button">Large button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-large  btn-danger" type="button">Large button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-large  btn-inverse" type="button">Large button</button></a>
</p>	
	
<p>	
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn" type="button">Default button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button href="google.com" class="btn btn-primary" type="button">Default button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-info" type="button">Default button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-success" type="button">Default button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-warning" type="button">Default button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-danger" type="button">Default button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-inverse" type="button">Default button</button></a>
</p>

<p>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-small" type="button">Small button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-small btn-primary" type="button">Small button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-small  btn-info" type="button">Small button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-small  btn-success" type="button">Small button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-small  btn-warning" type="button">Small button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-small  btn-danger" type="button">Small button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-small  btn-inverse" type="button">Small button</button></a>
</p>	

<p>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-mini" type="button">Mini button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-mini btn-primary" type="button">Mini button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-mini btn-info" type="button">Mini button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-mini btn-success" type="button">Mini button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-mini btn-warning" type="button">Mini button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-mini btn-danger" type="button">Mini button</button></a>
<a href="http://ilkomunived.blogspot.com/" target="_blank"><button class="btn btn-mini btn-inverse" type="button">Mini button</button></a>
</p>
</body>
</html>

Masih bingung? Liat gambar berikut: