Så här ändrar du knappen Färg i HTML (med bilder)

Thistaaches du hur du ändrar en knappfärg i HTML. Du kan ändra en knappfärg med vanlig HTML eller använda CSS (Cascading Style Sheets) i HTML5.

Steg

Metod 1 av 2:

Med hjälp av html

1. Skriv in din HTMLs kropp. Det här är starten på knappen för din HTML-kod. Kroppen på din HTML är området däremellan och märke. Kroppen är där de synliga elementen på en webbsida placeras med hjälp av HTML.

2. Typ stil = efter "knapp" I din knapplapp. Detta indikerar att det finns stilelement på knappen. Alla stilelement kommer att placeras efter "=" tecken.

3. Lägg till ett citattecken (") efter den lika (=) tecken. Alla stilelement i din HTML-knapp-tagg ska placeras inom citattecken.

4. Typ bakgrundsfärg:i citattecken efter "stil =". Detta element används för att ändra bakgrundsfärgen på knappen.

5. Skriv ett färgnamn eller hexadecimal kod efter "bakgrundsfärg:". Du kan skriva namn på en färg (i.E, blå) eller en hexadecimal färg.

För att hitta en hexadecimal kod, gå till https: // Google.com / söka?q = färg + plockare I en webbläsare. Använd glidstången längst ner för att välja en färg. Använd cirkeln i fönstret för att välja en färgton. Markera och kopiera den 6-siffriga koden (inklusive pundskylten) i sidofältet till vänster och klistra in i din knapplapp.

Du kan också använda "transparent" som bakgrundsfärg

6. Skriv ett halvkolon (-) efter bakgrundsfärgen. Använd en halvkolon för att separera de olika stilelementen i HTML-knappen.

7. Typ gräns färg: i citattecken efter "stil =". Detta element används för att bestämma färgen på gränsen runt knappen. Du kan placera stilelement i vilken beställning som helst i citatmarkörerna efter "stil =". Varje element måste separeras av en halvkolon (-).

8. Skriv ett färgnamn eller hexidekimal kod för gränsfärgen. Färgnamnet eller hexidekimalkoden för gränsen går efter "gräns färg:" element.

Om du vill ta bort gränsen, skriv typ gräns: ingen i stället för "gräns färg:" element.

9. Skriv ett halvkolon (-) efter gränsfärgen. Använd en halvkolon för att separera de olika stilelementen i HTML-knappen.

10. Typ Färg:i citattecken efter "stil =". Detta element används för att ändra textfärgen i knappen. Du kan placera stilelement i vilken beställning som helst i citatmarkörerna efter "stil =". Varje element måste separeras av en halvkolon (-).

11. Skriv namnet på en färg eller hexadecimal kod. Detta går efter "Färg:" I stilelementet. Detta bestämmer textens färg i knappen.

12. Skriv ett citatmärke (") Efter alla dina stilelement. Alla dina stilelement ska vara i citatmärken efter "stil =" I knapptaget. När du är klar med att lägga till alla dina stilelement, skriv ett citatmärke (") i slutet för att stänga stilelementen.

13. Typ > Efter stilelementen. Detta stänger öppningsknappen.

14. Skriv din knapptext efter knappen. När du har slutat skapa öppningsetiketten för din knapp, skriv texten du vill gå i knappen efter taggen.

15. Skriv efter din knapptext. Detta är stängningskoden för din knapp. Din knapp är klar. Din HTML-kod ska se ut så här.

Metod 2 av 2:

Använda CSS

1. Skriv högst upp i ditt HTML-dokument. Detta skapar ett huvud för ditt HTML-dokument. Huvudet på ditt dokument är där information som inte är synlig på din webbsida är placerad. Detta inkluderar meta-data, titeln på sidan och stilarken.

2. Typ . Den här taggen Lägg till en plats på din webbsida för Cascading Style Sheets (CSS). Det här avsnittet går i huvudet på ditt HTML-dokument.

Vissa HTML-dokument använder ett externt stilark. Om så är fallet måste du hitta platsen för den externa CSS-filen och redigera knappen Style-ark på det dokumentet.

3. Typ .knapp { på en separat linje efter stil avsnittet. Detta öppnar stilarket för en knapp som du skapar en stil för.

Du kan också göra knappen färgändring när du placerar muspekaren över knappen genom att skapa ett separat stilark med .Knapp: Hover { som öppningsetiketten.

4. Typ bakgrundsfärg:. Detta går på en separat linje i knappen Style Style. Detta element styr bakgrundsfärgen på knappen.

5. Skriv namnet på en färg eller hexadecimal kod följt av en halvkolon (-). Skriv detta efter "bakgrundsfärg:" element i knappen stilark. Detta anger knappens bakgrundsfärg.

Du kan också skriva "transparent" som bakgrundsfärgen för att göra bakgrunden osynlig.

6. Typ gräns färg:. Elementet styr färgen på gränsen runt knappen. Skriv detta på en separat linje i stilarket för knappen.

7. Skriv namnet på en färg eller hexadecimal kod följt av en halvkolon (-). Detta bestämmer färgen på gränsen runt knappen. Detta går efter "gräns färg:" element i knappen stilark.

Om du vill ta bort gränsen, skriv typ gräns: ingen- i stället för "Gränsfärg: Colorname" element.

8. Typ Färg:. Skriv detta på en separat linje i stilarket. Detta element styr texten på texten i knappen.

9. Skriv namnet på en färg eller hexadecimal kod följt av en halvkolon (-). Detta bestämmer textens färg inuti knappen. Detta går efter "Färg:" element i knappen stilark.

10. Typ } på en separat linje. Detta stänger stilarket för din knapp. Du kan skapa flera knappar stilark så länge du ger varje knapp ett unikt namn.

11. Skriv efter att du har avslutat din CSS. När du har slutat skapa alla dina stilark, skriv "" På en separat linje för att stänga stilen av ditt HTML-dokument.

12. Typ . Detta stänger huvudet på ditt HTML-dokument.

13. Typ knapp-text I kroppen av ditt HTML-dokument. Detta lägger till en knapp till den synliga delen av din HTML med hjälp av de stilark som anges i stilsektionen i ditt HTML-dokument. Byta ut "url" med webbadressen knappen länkar till. Kroppen i ditt HTML-dokument går in mellan och Taggar i ditt HTML-dokument. Din HTML-kod ska se ut så här:

Dela på det sociala nätverket:

Så här ändrar du knappen färg i html

Steg