Hvordan man laver en knap i CSS

Opret stilfuld knapper uden grafik ved hjælp af CSS kode . Comstock / Comstock / Getty Images

knapperne på websider, når venstre unstyled, vil sandsynligvis se anderledes i enhver browser.Du kan forbedre dine web-design ved hjælp af Cascading Style Sheet (CSS) kode for at matche knapperne til resten af ​​dit websted.De to knap-skabe tags - & lt; knap & gt;og & lt; input & gt;- Kan tage en hvilken som helst CSS ejendom, du ville bruge på de fleste andre HTML-elementer, såsom stykker og & lt; div & gt;kasser.Mere avancerede tricks i CSS Level 3 (CSS3), såsom gradient baggrunde og skyggeeffekter, kan du oprette knapper uden at åbne et grafisk redigering program.

Instruktioner

  1. Skriv HTML-koden til at lave en knap vises på din webside.Du kan bruge enten & lt; knap & gt;tag eller & lt; input & gt;tag, men & lt; input & gt;tag er bedre, hvis du føjer knapper til formularer.Knappen tag ser således ud:

    & lt; knap & gt; Knap Tekst & lt; / knappen & gt;

    Sæt den tekst, du vil have vist på knappen mellem & lt; knap & gt;tags.Dette

    er anderledes end & lt; input & gt;tag, der kræver, at du indstille & lt; typen & gt;tillægge "send" og "værdi" attribut til den tekst, du vil have på knappen.Her er en & lt; input & gt;eksempel:

    & lt; input type = "submit" value = "Klik her!"/ & gt;

  2. Åbn stil side for din hjemmeside i din kode editor.Tilføj & lt; stil & gt;tags og skriv din CSS kode mellem dem, hvis du ikke har en typografiark eller vide, hvordan du oprette en.Skriv en vælger i CSS til & lt "Vælg" knappen & gt;eller & lt; input & gt;tag som så:

    knappen {}

    Skriv en "attribut" vælgeren for & lt; input & gt;stedet for at vælge den & lt; input & gt;tagge sig selv, fordi din formular vil omfatte & lt; input & gt;tags for tekstfelter så godt.Her er den "attributten" selector:

    input [type = "submit"] {}

  3. Brug CSS kode for at style på knappen som du vil.Indstil baggrunden for en ny farve, billede eller endda en gradient.Fjern standard grænse og ændre det til noget, du foretrækker, såsom en afrundet kant, ved hjælp af "border-radius."Indstil "box-shadow" ejendom for at tilføje en slagskygge.Her er et eksempel:

    knap {

    background: # ff0000;

    farve: #ffffff;

    kant: 0px;

    border-radius: 10px;

    }

    Ovenstående kode skaber en rød knap med hvid tekst, ingen grænse og runde hjørner.

Tips & amp;Advarsler

  • Påfør en slagskygge til knappen, og brug derefter ": aktiv" pseudo-klasse til at fjerne drop shadow, når brugeren klikker på knappen.
  • Påfør en gradient baggrund i CSS og derefter bruge ": hover" pseudo-klasse til at anvende en omvendt gradient når nogen svæver over knappen.Dette skaber en slick fremhævning effekt.
  • Internet Explorer version 8 og under manglende støtte til de fleste CSS3 teknikker, og Internet Explorer 9 er begrænset i sin støtte.Brug fall-back JavaScripts, ekstra style sheets og billeder til at gøre dine knapper kompatible på tværs af mange forskellige browsere.
622
0
1
Web Development