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

Membuat Search Box Popup Full Screen Responsive

Pure css Search Box Pop Up Reesponsive Cara Membuat Kotak Pencarian di blog menjadi pop up full screen responsive . Tutorial kali ini saya akan berbagi cara untuk mendesain tampilan search box menjadi popup .. Bagi kalian yang ingin mengganti kolom pencarian blog kalian dengan tampilan yang berbeda, bisa mencoba search box yang akan di share pada tutorial ini. Jangan lupa untuk membaca artikel lainnya yang sudah di share di blog mas tamvan ini ya gan :) Tutorial Blogger Lainnya : Cara Praktis Membuat Tabel Di Postingan Blog Dengan Tool Memasang Hover Share Button Image Di blogger TS Grid - Template Blogger Responsive Dan Valid HTML5 Buat kalian yang igin melihat tampilannya, bisa kunjungi link berikut.. Demo Search Box Pop Up Lanjut saja kita ke tahap pemasangan search box popup responsive pure css ini ya gan :3 Pure CSS PopUp Search Box Responsive Seperti biasa, login terlebih dahulu ke blogger.com Sete...
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

Membuat Menu Bar Drop Down Responsive

Tutorial Cara Memasang Menu Navigation Bar Deopdown Responsive Di Blog Memasang Menu kafetaria Responsive Di Blog , Tutorial kali ini kita akan membuat menu navigation bar drop down responsive pada blogger.. Sebelumnya saya juga sudah pernah posting tentang menu bar, kalian bisa memilih pada artikel berikut ini, barang kalia ada yang menarik.. Tutorial Blogger Lainnya : Cara Membuat Vertical Mega Menu Multi Level Di Blog Membuat Menu Bar Drop Down Responsive Tanpa Edit HTML Simple Menu Navigation Drop Down Effect With Css nah sekarang mari kita lanjut ke tutorial cara pemasangan menu navigation bar drop down yang responsive di blog.. Tutorial Membuat Menu Bar Drop Down Responsive Login ke blogger.com Pilih menu Template , Edit HTML , Cari Kode </head> Setelah ketemu, masukan css berikut di atasnya... <style type="text/css"> .slide-hidangandisplay:none;background:#3a89b9;padding:0 ...
Post a Comment
Read more