មេរៀនទី៦: ដាក់ Style លើ Button មានរូបភាពក្នុង CSS

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

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; }