វិធីដាក់ Style លើ Button ជាមួយរូបភាពក្នុង CSS

ការបង្កើត Form មិនមែនជារឿងពិបាកនោះឡើយ ប៉ុន្តែដើម្បីឲ្យ Form នោះមានភាព​ទាក់ទាញ លោកអ្នក​ចាំបាច់​ត្រូវ​បន្ថែម Style ទៅលើវា​ ។ កាលពីអត្ថបទ​មុនៗ បានលើកពីការប្រើប្រាស់ Style នានារួចហើយ ។ ថ្ងៃនេះ សូមបន្តជាមួយគ្នា នូវ Style ថ្មីបន្ថែមទៀត ដូចខាងក្រោម៖

ក. ជំហានទី១ សូមបង្កើត File HTML ជាលក្ខណៈ Form

Code

Name:
Password:
 

Name:
Password:
 

ខ. រួចបន្ថែម Style ដោយភ្ជាប់រូបភាព សម្រាប់ដាក់លើប៊ូតុង នៅពេល MouseOver

CSS

.input {
border: 1px solid #006;
background: #ffc;
}
.input:hover {
border: 1px solid #f00;
background: #ff6;
}
.button {
border: none;
background: url('/forms/up.png') no-repeat top left;
padding: 2px 8px;
}
.button:hover {
border: none;
background: url('/forms/down.png') no-repeat top left;
padding: 2px 8px;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br { clear: left; }

សម្រាប់ចម្ងល់ សំនួរ និងសំណូមពរ សូមដាក់មតិនៅខាងក្រោម! សូមអរគុណ!