Hoe maak je een knop in CSS maken

Maak stijlvolle knoppen zonder graphics met behulp van CSS code . Comstock / Comstock / Getty Images

De knoppen op uw webpagina's, toen verliet zonder stijl, zijn waarschijnlijk anders in elke browser te verschijnen.U kunt het verbeteren van uw website ontwerpen met behulp van cascading style sheet (CSS) code om knoppen aan te passen aan de rest van uw site.De twee knoppen maken labels - & lt; button & gt;en & lt; invoer & gt;- Kan elke CSS-woning die u zou gebruiken op de meeste andere HTML-elementen, zoals paragrafen en & lt nemen; div & gt;boxes.Meer geavanceerde trucs in CSS niveau 3 (CSS3), zoals de helling achtergronden en slagschaduwen, laat je knoppen te maken zonder het openen van een programma voor het bewerken van afbeeldingen.

instructies

  1. Schrijf de HTML-code om een ​​knop op uw webpagina.Knop & gt; kunt u ofwel de & lt;tag of de & lt; invoer & gt;tag, maar de & lt; invoer & gt;tag is beter als je het toevoegen van knoppen aan formulieren.De knop tag ziet er als volgt uit:

    & lt; button & gt; Knoptekst & lt; /

    knop & gt;

    Zet de tekst die u wilt weergeven op de knop tussen de & lt; button & gt;labels.Dit is anders dan de & lt; invoer & gt;tag, die u nodig heeft om de & lt ingesteld; soort & gt;toeschrijven aan "submit" en de "waarde" attribuut om de tekst die u op de knop.Hier is een & lt; invoer & gt;Bijvoorbeeld:

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

  2. Open het style sheet voor uw website in de code-editor.Voeg & lt; stijl & gt;labels en schrijf uw CSS-code tussen hen als u niet beschikt over een stylesheet hebben of weten hoe er een te maken.Schrijf een selector in CSS om de & lt "selecteer"; button & gt;of & lt; invoer & gt;tag als volgt:

    knop {}

    Schrijf een "attribuut" selector voor & lt; invoer & gt;in plaats van het selecteren van de & lt; invoer & gt;tag zelf, omdat uw formulier zal & lt; invoer & gt;tags voor tekstvelden ook.Hier is het "attribuut" selector:

    ingang {}

  3. Gebruik CSS-code [type = "submit"] om de knop stijl als u wilt.Stel de achtergrond van een nieuwe kleur, beeld of zelfs een helling.Verwijder de standaard grens en verander het naar iets wat je wilt, zoals een afgeronde rand, met behulp van "border-radius."Stel de "box-shadow 'eigenschap om een ​​slagschaduw toe te voegen.Hier is een voorbeeld:

    knop {

    achtergrond: # ff0000;

    color: #ffffff;

    border: 0px;

    border-radius: 10px;

    }

    De bovenstaande code maakt een rode knop met witte tekst, geen grens en ronde hoeken.

Tips & amp;Waarschuwingen

  • Breng een slagschaduw aan de toets, gebruik dan de ": actieve" pseudo-klasse aan de slagschaduw te verwijderen wanneer de gebruiker op de knop klikt.
  • Breng een gradient achtergrond in CSS en gebruik dan de ': hover' pseudo-class om een ​​omgekeerde gradiënt van toepassing wanneer iemand op de knop zweeft.Dit creëert een gladde highlighting effect.
  • Internet Explorer versie 8 en lager gebrek ondersteuning voor de meeste CSS3 technieken en Internet Explorer 9 is beperkt in haar steun.Gebruik fall-back JavaScripts, extra style sheets en afbeeldingen van uw knoppen compatibel met verschillende browsers te maken.
95
0
1
Webontwikkeling