CSS Tutorial over hoe je de vorm van een verzendknop vervangen door een afbeelding

Browsers toepassen vlakte, grijze opmaakprofielen op knoppen in webformulieren. Deze knoppen kijken vergelijkbaar zijn met die gevonden in pre-XP-versies van Windows en gedateerd weergegeven wanneer contrast tegen anders prachtige Web ontwerpen. U kunt in plaats daarvan stijl 'Verzenden' knoppen met Cascading Style Sheet (CSS) code en de grijze achtergrond vervangen door een afbeelding. Te richten op de knop, moet u ook een ID toevoegen aan de HTML-code. Aangezien browsers standaard styling aan knoppen toevoegt, gebruik maken van CSS voor zwenking vandoor de grens en de juiste muisaanwijzer inschakelen.

Instructies

1

Ga naar "Start" op de taakbalk van Windows en voer "Kladblok" in het zoekvak. Klik op "Bestand" op de bovenste menubalk en open uw Web-pagina met het formulier en de verzendknop. U ziet de ruwe code voor die pagina weergegeven in de editor.

2

Zoek de "Verzenden"-knop in uw HTML-formuliercode:

< input type = "submit" naam = waarde "submit" = "Verzend" / >

De naam van een ID toevoegen aan uw knop "Verzenden":

< input type = "submit" naam = "submit" id = "send_button" value = "Verzend" / >

Verwijder het kenmerk "waarde" en de tekst, zoals "Verzenden," om de tekst verdwijnen uit de knop als de afbeelding al tekst bevat.

3

Ga naar het begin van de code en zoekt u naar "< >" stijltags. Als u niet kunt hen vinden, deze tags tussen de "< head >"-codes in uw Web-pagina toevoegen:

< stijl type = "text/css" >

< / style >

4

Schrijf een selector om te "selecteren" de "Verzenden" knop tussen uw "< style >" tags:

{send_button}

De bovenstaande selector vindt een HTML-element met "send_button" als de ID-naam. Welke je tussen de accolades CSS-code zal veranderen de manier waarop de geselecteerde HTML-element ziet er in de browser.

5

Instellen van de "Verzenden" knop grens om nul pixels en geef het dezelfde breedte en hoogte als de afbeelding die u wilt gebruiken:

{send_button}

Border: 0;

breedte: 100px;

hoogte: 50px;

}

6

De afbeelding die u wilt gebruiken als de achtergrond voor de knop toevoegen:

achtergrond-afbeelding: URL('path/to/image.png') center neen-repeat;

De bovenstaande code gaat tussen de accolades op dezelfde manier als de andere code. "Path/to/image.png" vervangen door het adres van de website naar de afbeelding die u wilt gebruiken. Gebruik "center" en "no-repeat" centreren de afbeelding op de knop en uitschakelen van achtergrond tegels.

7

Stel de "cursor" eigenschap "pointer" om de vinger wijzende handcursor weer in de knop, omdat browsers terug naar de pijlcursor schakelen wanneer u de stijl van een knop wijzigen:

cursor: aanwijzer;

Tips & waarschuwingen

  • Browsers die ondersteuning bieden voor CSS versie 3 (CSS3) kunnen u selecteren formulierknoppen per type: "input ['type = indienen '] {}". In compatibele browsers, zal deze selector richten op alle knoppen indienen.
  • Door het instellen van het beeld als achtergrond voor de knop, kunt u 'Verzenden' van de knop tekst te behouden en stijl met behulp van CSS. En de uitlijning opvulling of tekst gebruiken bij het positioneren van de knoptekst.