Skip to main content

Pure Css Button Pack For Web Design

button pack pure css

Membuat Tombol Button di Blogger Dengan HTML dan CSS

Kumpulan Tombol Button Keren Pure CSS dan HTML, kali ini aku akan menawarkan beberapa style untuk menciptakan tampilan tombol download, demo atau yang lainnya lebih menarik ditambah dengan sedikit animasi saat di klik dan icon pada tombolnya

Buat kalian yang ingin membuat tombol button dengan beragam warna dan tampilan, bisa mencobanya menggunakan tombol button dibawah ini.

Tombol Button Pack Pure CSS Style1

Membuat Tombol Button di Blogger Dengan HTML dan CSS Pure CSS Button Pack For Web Design

Source Code Style1 
 <link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/ButtonPack/style-button1.css"/> 
 <!-- Blue Buttons --> <a class="btn btn--lg btn--blue" href="#">Button</a> <a class="btn btn--df btn--blue" href="#">Button</a> <a class="btn btn--md btn--blue" href="#">Button</a> <a class="btn btn--sm btn--blue" href="#">Button</a>  <!-- Green Buttons --> <a class="btn btn--lg btn--green" href="#">Button</a> <a class="btn btn--df btn--green" href="#">Button</a> <a class="btn btn--md btn--green" href="#">Button</a> <a class="btn btn--sm btn--green" href="#">Button</a>  <!-- Red Buttons --> <a class="btn btn--lg btn--red" href="#">Button</a> <a class="btn btn--df btn--red" href="#">Button</a> <a class="btn btn--md btn--red" href="#">Button</a> <a class="btn btn--sm btn--red" href="#">Button</a>

Tombol Button Pack Pure CSS Style2

Membuat Tombol Button di Blogger Dengan HTML dan CSS Pure CSS Button Pack For Web Design

Source Code Style2 
 <link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/ButtonPack/style-button2.css"/> 
  <a href='#'><button class="small button">Button</button></a> <a href='#'><button class="small color red button">Button</button></a> <a href='#'><button class="small color green button">Button</button></a> <a href='#'><button class="small color blue button">Button</button></a>  <a href='#'><button class="small button" disabled>Button</button></a> <a href='#'><button class="small color red button" disabled>Button</button></a> <a href='#'><button class="small color green button" disabled>Button</button></a> <a href='#'><button class="small color blue button" disabled>Button</button></a>  <a href='#'><button class="small button">Button</button></a> <a href='#'><button class="small button">Button</button></a> <a href='#'><button class="small button">Button</button></a> <a href='#'><button class="small button">Button</button></a>  <a href='#'><button class="button">Button</button></a> <a href='#'><button class="color red button">Button</button></a> <a href='#'><button class="color green button">Button</button></a> <a href='#'><button class="color blue button">Button</button></a>  <a href='#'><button class="button" disabled>Button</button></a> <a href='#'><button class="color red button" disabled>Button</button></a> <a href='#'><button class="color green button" disabled>Button</button></a> <a href='#'><button class="color blue button" disabled>Button</button></a>  <a href='#'><button class="button">Button</button></a> <a href='#'><button class="button">Button</button></a> <a href='#'><button class="button">Button</button></a> <a href='#'><button class="button">Button</button></a>  <a href='#'><button class="large button">Button</button></a> <a href='#'><button class="large color red button">Button</button></a> <a href='#'><button class="large color green button">Button</button></a> <a href='#'><button class="large color blue button">Button</button></a>  <a href='#'><button class="large button" disabled>Button</button></a> <a href='#'><button class="large color red button" disabled>Button</button></a> <a href='#'><button class="large color green button" disabled>Button</button></a> <a href='#'><button class="large color blue button" disabled>Button</button></a>  <a href='#'><button class="large button">Button</button></a> <a href='#'><button class="large button">Button</button></a> <a href='#'><button class="large button">Button</button></a> <a href='#'><button class="large button">Button</button></a>

Tombol Button Pack Pure CSS Style3

Membuat Tombol Button di Blogger Dengan HTML dan CSS Pure CSS Button Pack For Web Design

Source Code Style3 
 <link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/ButtonPack/style-button3.css"/> 
 <a href="#"><button type="button" class="btn style1">Click Me</button></a> <a href="#"><button type="button" class="btn style2">Click Me</button></a> <a href="#"><button type="button" class="btn style3">Click Me</button></a> <a href="#"><button type="button" class="btn style4">Click Me</button></a> <a href="#"><button type="button" class="btn style5">Click Me</button></a> <a href="#"><button type="button" class="btn style6">Click Me</button></a> <a href="#"><button type="button" class="btn style7">Click Me</button></a> <a href="#"><button type="button" class="btn style8">Click Me</button></a> <a href="#"><button type="button" class="btn style9">Click Me</button></a> <a href="#"><button type="button" class="btn style10">Click Me</button></a> <a href="#"><button type="button" class="btn style11">Click Me</button></a> <a href="#"><button type="button" class="btn style12">Click Me</button></a> <a href="#"><button type="button" class="btn style13">Click Me</button></a> <a href="#"><button type="button" class="btn style14">Click Me</button></a> <a href="#"><button type="button" class="btn style15">Click Me</button></a>

Tombol Button Pack Pure CSS Style4

Membuat Tombol Button di Blogger Dengan HTML dan CSS Pure CSS Button Pack For Web Design

Source Code Style4 
 <link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/ButtonPack/style-button4.css"/> 
 <a href="#" class="button gray">BUY NOW</a> <a href="#" class="button black">BUY NOW</a> <a href="#" class="button red">BUY NOW</a> <a href="#" class="button yellow">BUY NOW</a> <a href="#" class="button green">BUY NOW</a> <a href="#" class="button blue">BUY NOW</a>  <a href="#" class="button gray round">DOWNLOAD</a> <a href="#" class="button black round">DOWNLOAD</a> <a href="#" class="button red round">DOWNLOAD</a> <a href="#" class="button yellow round">DOWNLOAD</a> <a href="#" class="button green round">DOWNLOAD</a> <a href="#" class="button blue round">DOWNLOAD</a>  <a href="#" class="button gray side">DOWNLOAD</a> <a href="#" class="button black side">DOWNLOAD</a> <a href="#" class="button red side">DOWNLOAD</a> <a href="#" class="button yellow side">DOWNLOAD</a> <a href="#" class="button green side">DOWNLOAD</a> <a href="#" class="button blue side">DOWNLOAD</a>  <a href="#" class="button gray tags">SIGN UP</a> <a href="#" class="button black tags">SIGN UP</a> <a href="#" class="button red tags">SIGN UP</a> <a href="#" class="button yellow tags">SIGN UP</a> <a href="#" class="button green tags">SIGN UP</a> <a href="#" class="button blue tags">SIGN UP</a>  <a href="#" class="button gray rarrow">LEARN MORE</a> <a href="#" class="button black rarrow">LEARN MORE</a> <a href="#" class="button red rarrow">LEARN MORE</a> <a href="#" class="button yellow rarrow">LEARN MORE</a> <a href="#" class="button green rarrow">LEARN MORE</a> <a href="#" class="button blue rarrow">LEARN MORE</a>  <a href="#" class="button gray larrow">GO BACK</a> <a href="#" class="button black larrow">GO BACK</a> <a href="#" class="button red larrow">GO BACK</a> <a href="#" class="button yellow larrow">GO BACK</a> <a href="#" class="button green larrow">GO BACK</a> <a href="#" class="button blue larrow">GO BACK</a>

Tutorial Pemasangan Tombol Button di Blogger

Silahkan kalian pilih style dari 4 style tombol button di atas, kalo sudah kalian pribadi copy Kode CSSnya dan masukan ke template blogger kalian, caranya

  • Masuk ke Blogger.com
  • Selanjutnya pilih menu Template → Edit HTML, Lalu cari kode </head>
  • Kalo sudah ketemu masukan CSS di atas sesuai dengan style yang kalian inginkan tepat di atas kode </head>
  • Sekarang Save Template
  • Tahap selanjutnya, kalian tinggal mencopy kode htmlnya ke dalam postingan dalam mode / tab HTML bukan Compose
  • Tanda # (Pagar) ganti dengan link tujuan kalian
  • Selesai

Cukup sekian artikel tentang Kumpulan Tombol Button Untuk Blogger Pure CSS ini semoga bermanfaat
Kalo ada yang mau ditanyakan silahkan bertanya di kolom komentar. Keyword Terkait : Cara Membuat Tombol Download Dan Demo di Blog, Membuat tombol button di blog dengan icon dan animasi

Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Daftar Isi / Sitemap Di Blog

document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; var css = '#sitemap-blogpadding:7px 10px;margin:0 auto#sitemap-blog tablewidth:auto;margin:0 auto;border:none!important#sitemap-blog table tdborder:none!important;padding:0!important#sitemap-blog formfont:inherit#sitemap-blog labeldisplay:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0#sitemap-blog select[disabled]opacity:.4#post-searcherdisplay:block;margin:0;padding:0#sitemap-blog input,#sitemap-blog selectwidth:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box#sitemap-blog select optionmin-height:1.4em!important#sitemap-blog input#feed-qpadding:5px 10px!important#daftar-isi-blogbackgr...
Post a Comment
Read more

Cara Memasang Widget Recent Post By Label Di Blog

Tutorial cara membuat recent post menurut label Cara Menambahkan Widget Recent Post By Label Di Bawah Postingan Blog . Kali ini saya akan berbagi tutorial menciptakan 2 (dua) widget gres dibawah postingan blog yang akan menampilkan recent post berdasarkan label tertentu. Widget Recent Post by Label ini saya ambil dari Template Evo Magz buatan Mas Sugeng yang sangat fenomenal. Widget Recent Post by Label With Thubnial ini akan menampilkan 4 artikel terbaru ditambah dengan menampilkan Komentar , Tanggal Di Publikasikannya dan juga readmore . Kalian juga bisa mengatur berapa artikel yang akan ditampilkan. Nah, untuk memasang Widget Recent Post by Label di bawah postingan blog , bisa ikuti tutorial singkat dibawah ini... Membuat Recent Post Berdasarkan Kategori Langkah pertama, silahkan login ke akun Blogger Setelah login, masuk ke menu, Template , Edit HTML , Cari Kode </head&gt Kalo sudah ketemu, masukan script Widget Recent Post by Label With Thubnial di...
Post a Comment
Read more

Cara Membuat Tabel Responsive Di Blogger

Tutorial Membuat Tabel Keterangan Responsive Di Dalam Postingan Blog Tutorial Cara Memasang / membuat semoga tabel keterangan responsive di dalam postingan blog , pada postingan kali ini saya kan memberikan table atau kotak keterangan yang responsive untuk di pasang pada postingan blog... Bagi agan blogger yang suka atau ingin menciptakan tabel / kotak keterangan untuk memisahkan, mengelompokan bagian tertentu pada sebuah text dengan tampilan yang suport untuk semua device seperti hp, tablet, laptop, notebook dan yang lainnya... ... agar tampilan tabel tersebut tidak melebihi ukuran layar maka kita harus membuatnya menjadi responsive, mobile friendly agar enak di pandang dan di bacanya.... Sebelumnya saya juga sudah pernah posting artikel tentang cara menciptakan tabel keterangan yang responsive dengan tampilan yang anggun dan berwarna .... Bagi kalian yang ingin mencobanya, silahkan kunjungi artikel berikut ini..... Membuat Beautiful Table Responsive With CSS Untuk tutor...
Post a Comment
Read more