Pemahaman Dasar Css Input Button Dan Tag Button

Beberapa dari kalian mungkin merasa bosan dengan tampilan button di halaman blogmu yang tidak sanggup mengikuti keadaan dengan tampilan blogmu menyerupai ini:

Tanpa CSS

Masalahnya, mungkin kalian belum tahu menyerupai apa format CSS untuk tampilan button ini. Nah, di sini Saya akan menjelaskan ihwal teknik dasar dalam mengubah tampilan button di blogmu.
Ini ialah teladan CSS sebuah input button dan tag button dasar (di sini Saya menyamakan tampilan antara button, submit dan reset biar lebih efisien):

input[type="button"], input[type="submit"], input[type="reset"], button {    font:normal 0.9em Arial,Sans-Serif;    background-color:#4169E1;    border:1px solid #B7B7B7;    padding:2px 7px;    color:#fff;  }

Letakkan saja CSS tersebut di atas aba-aba </style> atau ]]></b:skin>, maka tampilan tombol-tombol di blogmu akan berubah menyerupai ini:

Dengan CSS

Namun itu saja tampaknya masih kurang. Kita juga perlu menerapkan event hover dan active pada tombol-tombol tersebut biar tampak lebih kasar dan bikin nafsu para pengunjung untuk memencet. CSS lanjutannya ialah menyerupai ini:

/* warna background ketika pointer di atasnya */  input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {    background-color:#A52A2A;  }   /* warna background ketika tombol ditekan */  input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, button:active {    background-color:#000;  }

Jika kedua event tersebut telah diterapkan, maka jadinya akan tampak menyerupai ini:

Beberapa dari kalian mungkin merasa bosan dengan tampilan Pemahaman Dasar CSS Input Button dan Tag Button — Saat HOVER

Kita ketahui dari aba-aba ini bahwa terdapat lima properti yang umum digunakan, yaitu:

font: (mode tampilan (bold normal atau italic), ukuran font dan jenis font)
background: (warna latar belakang)
padding: (jarak antara batas terluar sebuah area dengan kontennya)
color: (warna teks) dan
border: ukuran garis tepi, tipe garis tepi dan warna garis tepi).

Dan ini ialah teladan kerangkanya:

<input value="Button" type="button"/>  <input value="Submit" type="submit"/>  <input value="Reset" type="reset"/>  <button>Tag Button</button>

Tentu saja, itu semua hanya sebagian kecil dari penerapan CSS dalam tombol. Suatu ketika mungkin kau menginginkan tampilan-tampilan tombol yang lebih dahsyat menyerupai ini, ini, ini atau ini:

Beberapa dari kalian mungkin merasa bosan dengan tampilan Pemahaman Dasar CSS Input Button dan Tag Button

Tapi bagaimana?? (Klik di sini!)
Sumber https://www.dte.web.id/