Pure CSS Button Pack For Web Design

Membuat Tombol Button di Blogger Dengan HTML dan CSS

Kumpulan Tombol Button Keren Pure CSS dan HTML, kali ini saya akan memberikan beberapa style untuk membuat tampilan tombol download, demo atau yang lainnya lebih menarik ditambah dengan sedikit animasi ketika 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

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

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

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

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 langsung 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