Cara membuat tombol warna warni HTML + CSS
cara mudah membuat tombol warna warni di blog, wordpress maupun di web menggunakan HTML dan CSS
by
muzadidil
Petunjuk Pengguna Windows
- Buat Folder Baru
- Buka aplikasi NOTEPAD ++
- Copy Paste File HTML dan dimpan menggunakan format HTML
- Copy Paste File CSS dan simpan dengan nama style.css
- Cek kembali kode yang kalian simpan pastikan sudah benar
- Buka Folder tempat kalian menyimpan file sebelumnya
- klik 2x pada file HTML-nya
- Preview akan di tampilkan, Jika terdapat yang tidak sesuai cek ulang kembali di File HTML atau CSS-nya
Petunjuk Pengguna ANDROID
- Buat Folder Baru
- Buka aplikasi anWriter
- Copy Paste File HTML dan dimpan menggunakan format HTML
- Copy Paste File CSS dan simpan dengan nama style.css
- Buka aplikasi anWriternya
- Buka file htmlnya di menu pojok kiri (burger button)
- kemdian tekan preview
- Preview akan di tampilkan, Jika terdapat yang tidak sesuai cek ulang kembali di File HTML atau CSS-nya
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Small Buttons</h2>
<a class="shortc-button small red " href="/">Small</a>
<a class="shortc-button small orange " href="/">Small</a>
<a class="shortc-button small blue " href="/">Small</a>
<a class="shortc-button small green " href="/">Small</a>
<a class="shortc-button small black " href="/">Small</a>
<a class="shortc-button small gray " href="/">Small</a>
<a class="shortc-button small white " href="/">Small</a>
<a class="shortc-button small pink " href="/">Small</a>
<a class="shortc-button small purple " href="/">Small</a>
<br />
<div class="clear"></div>
<div class="divider divider-double" style="margin-bottom: 20px; margin-top: 20px;"></div>
<h2>Medium Buttons</h2>
<a class="shortc-button medium red " href="/">Medium</a>
<a class="shortc-button medium orange " href="/">Medium</a>
<a class="shortc-button medium blue " href="/">Medium</a>
<a class="shortc-button medium green " href="/">Medium</a>
<a class="shortc-button medium black " href="/">Medium</a>
<a class="shortc-button medium gray " href="/">Medium</a>
<a class="shortc-button medium white " href="/">Medium</a>
<a class="shortc-button medium pink " href="/">Medium</a>
<a class="shortc-button medium purple " href="/">Medium</a>
<br />
<div class="clear"></div>
<div class="divider divider-double" style="margin-bottom: 20px; margin-top: 20px;"></div>
<h2>Large Buttons</h2>
<a class="shortc-button big red " href="/">Large</a>
<a class="shortc-button big orange " href="/">Large</a>
<a class="shortc-button big blue " href="/">Large</a>
<a class="shortc-button big green " href="/">Large</a>
<a class="shortc-button big black " href="/">Large</a>
<a class="shortc-button big gray " href="/">Large</a>
<a class="shortc-button big white " href="/">Large</a>
<a class="shortc-button big pink " href="/">Large</a>
<a class="shortc-button big purple " href="/">Large</a>
</body>
</html>
CSS
a.shortc-button{border:0;cursor:pointer;padding:0 10px;display:inline-block;margin:10px 0 0;font-weight:500;outline:0;position:relative;background:#bdc3c7;color:#fff!important;text-decoration:none;font-size:10px;height:25px;line-height:25px;opacity:.9;overflow:hidden;border-radius:2px}
a.shortc-button:hover{opacity:1}
a.shortc-button:active{top:1px}
a.shortc-button i{margin-right:10px}
a.shortc-button.red{background:#e74c3c}
a.shortc-button.green{background:#2ecc71}
a.shortc-button.blue{background:#3498db}
a.shortc-button.orange{background:#e67e22}
a.shortc-button.pink{background:#ff00a2}
a.shortc-button.purple{background:#9b59b6}
a.shortc-button.black{background:#222}
a.shortc-button.white{background:#ecf0f1;color:#333!important}
a.shortc-button.medium{font-size:14px;height:45px;line-height:45px;padding:0 15px}
a.shortc-button.big{font-size:24px;height:65px;line-height:65px;padding:0 20px}
Tags
muzadidil
Intovert, Cepat beradaptasi, simple, Fokus, Cenderung Lebih suka makan daripada Minum.
Komentar