Kā mainīt HTML veidlapas pogas stilu?

Pievienojot pogu tīmekļa lapai, ieteicams izmantot CSS, lai izveidotu savu stilu. CSS izmantošana ir ieteicamā metode, jo tas ir efektīvāks un organizētāks veids, kā uzglabāt stila kodu atkārtotai izmantošanai vairāk nekā vienā lapā jūsu vietnē vai vietnē. Kā redzams zemāk redzamajā piemērā, var izmantot daudzus atribūtus, lai manipulētu ar katru pogas tipu.

CSS teksts pogas veidošanai

#submit {fona krāsa: #bbb; polsterējums: .5em; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; robežu rādiuss: 6px; krāsa: #fff; font-family: 'Oswald'; fonta lielums: 20px; teksta apdare: nav; robeža: nav; } #submit: hover {border: nav; fons: oranžs; kastes ēna: 0px 0px 1px # 777; }

HTML kods pogas izveidei

Pēc tam, kad CSS ir pievienota lapai, kurā CSS var izmantot jebkurā pogā, izmantojot kodu HTML.

Piemēra poga

CSS izveidotās pogas piemērs

No iepriekš minētā piemēra var redzēt, ka tad, kad peles neatrodas virs pogas, pogai ir gaiši pelēks fons un balts teksts. Kad peles poga pāri pogai, fons mainās oranžā krāsā. Arī pogas stūri ir noapaļoti, nevis kvadrāti, kā standarta forma.