apaCara
.com
editor
HTML
CSS
JS
PREVIEW
<!DOCTYPE html> <html> <head> <title>Demo HTML button</title> <style> /* style untuk contoh 3 */ button.button-gue{ padding: 0; background:none; border: 0; cursor: pointer; } button.button-gue:hover { opacity: .8; } /* dul button. style untuk contoh 4 */ .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df} </style> </head> <body> <h3>Contoh 1: button default</h3> <button name="btn-kirim-pesan" value="Kirim Pesan" type="Submit">Kirim Pesan</button> <hr> <h3>Contoh 2: button dengan javascript</h3> <button type="button" onclick="jalankanScript();">Klik Aku</button> <hr> <h3>Contoh 3: button dengan gambar (img)</h3> <button class="button-gue"> <img src="/media/images/content/button-download-katalog.png" alt="Download"> </button> <!-- script untuk contoh 2 --> <script> function jalankanScript() { alert('Hallo Sobat!') } </script> <h3>Contoh 4: button yang diberi style CSS </h3> <button class="btn-dul btn-dul-default">Default</button> <button class="btn-dul btn-dul-primary">primary</button> <button class="btn-dul btn-dul-success">success</button> <button class="btn-dul btn-dul-info">info</button> <button class="btn-dul btn-dul-warning">warning</button> <button class="btn-dul btn-dul-danger">danger</button> <button class="btn-dul btn-dul-clean">clean</button> </body> </html>
/* CSS code */
// javascript code