Sådan tilpasses knappen INPUT

Netbank bruger input knapper. Hemera Technologies / Photos.com / Getty Images

Input knapper oftest tillade en website besøgende til at indsende indholdet af en formular - alt fra en simpel kontakt kasse til en online jobansøgning.Brug cascading style sheets og et grundlæggende kendskab til HTML, kan du tilpasse disse knapper til at blive vist, men du ønsker.

Instruktioner

  1. Open kildekoden fil til din formular i Notesblok eller en anden tekst eller HTML-editor.

  2. Opret et typografiark ved at skrive i det følgende i & lt; head & gt;sektion af filen direkte under & lt; title & gt;linje:

    & lt; style type = "text / css" & gt;
    & lt; / typografi & gt;

  3. Fortæl dine typografiark, som du kommer til at være at skabe en stil for & lt; input & gt;knap med "min-knappen" klasse ved at indsætte følgende i mellem de to & lt; stil & gt;linjer:

    input.my-knappen {}

    Til dette arbejde præcist, du havde til at erklære den "min-knappen" klasse inde på send-knappen.Du kan bruge enhver klasse navn, du ønsker;"

    min-knappen" er blot et eksempel.

  4. Tilpas dit input knap ved at erklære regler inde i krøllede parenteser, slutter hver regel med et semikolon.Til at begynde, ændre bredden og højden på knappen ved hjælp af "bredde" og "højde" attributter:

    input.my-knappen {
    bredde: 200px;
    højde: 100px;
    }

  5. Ændre farven på knappen ved hjælp af attributten "background-farve", og farven på teksten med "farve" attribut:

    background-color: black;
    farve: gul;

  6. Ændre grænsen til knappen med attributten "grænse".Inde grænsen attribut du kan erklære grænsen bredde i pixels, type - punkteret, stiplet, osv DET-- farve:

    kant: 4PX stiplet gul;

  7. ændre udseendet af fonten hjælp attributter såsom "font-size", "tekst-transformere," og "font-family" attributter:

    font-size: 30px;
    font-family: Trebuchet MS;
    tekst-transform: store bogstaver;

  8. Brug en brugerdefineret baggrundsbillede med "background-image" attribut.Gem billedet på skrivebordet som button.jpg.Slip af med de "background-color" værdi og sæt "grænse" til 0 i din kildekode fil:

    baggrund-image: url ("button.jpg ');
    kant: 0;

Tips & amp;Advarsler

  • Find flere typografiark attributter at bruge til at tilpasse dine input knapper ved at kigge over Mozilla Developer Network s CSS referenceliste (se Resources).

Ressourcer

  • Mozilla Developer Network: CSS reference
819
0
1
Webdesign