Hoe maak je een knop kleiner in HTML



Als een webontwikkelaar wordt gebruikgemaakt van HTML om een knop te maken, wordt in browsers van de knop tekst centreren en extra spaties rond de tekst toevoegen. Dit levert een gecentreerde symmetrisch effect dat Websurfers worden gebruikt om te zien op websites. Er zijn tijden wanneer het pagina-ontwerp om kleinere knoppen met minder opvulling rond de tekst op die knoppen vraagt. U knoppen kleiner maken door styling hen met behulp van CSS.

  • Open een HTML-document met Kladblok of een HTML-editor.

  • Plak de volgende tekst overal in sectie van de "body" van het document:


    Deze tekst maakt twee knoppen. De tweede knop verwijst naar een CSS-klasse met de naam "smallButton."

  • Plak de CSS-code in van het document "head"-sectie hieronder:

    .smallButton {}
    hoogte: 20px;
    breedte: 130px;
    }

    Deze code maakt u de CSS-klasse van smallButton. Merk op dat een punt aan het begin van de naam van de klasse staat. De hoogte en breedte kenmerken kunnen u de grootte van de knop. De waarden voor hoogte en breedte in dit voorbeeld worden 20 pixels en 130 pixels. Deze waarden veroorzaken als u browsers wilt het verschrompelen van de knop voor die dimensies.

  • Sla het document op en bekijken in een browser. De tweede knop op de pagina zal worden kleiner dan de eerste, omdat de tweede knop verwijst naar de CSS-klasse van smallButton.

Tips & waarschuwingen
  • Wijzig de pixelwaarden in de CSS-code aan alles wat die je wilt. Als u kleinere waarden gebruiken, de knop wordt kleiner en minder ruimte wordt weergegeven tussen van de knop tekst en de rand van de knop. U kan de knop groter maken door middel van grotere getallen voor breedte en hoogte. Als u uw knoppen te klein maken, zal bezoekers van de site niet zitten kundig voor de knoppen tekst lezen.

Gerelateerde Artikelen

Hoe maak je een foto kleiner op een webpagina

Hoe maak je een foto kleiner op een webpagina

Als je nieuw bent bij web design en zijn onlangs begonnen met uw eigen blog of website, zou je kunnen afvragen over hoe om te gaan met enkele van de basisprincipes van webdesign. Een van de eenvoudigste dingen die je doen kunt om meer aandacht vestig
Hoe maak je een knop downloaden van een bestand in HTML

Hoe maak je een knop downloaden van een bestand in HTML

Webontwerpers gebruiken vaak knop formulieren ingebed in HTML-documenten voor hun functionele flexibiliteit en esthetische voordelen. Naast het aanbieden van een vloeiende en visueel aangename manier zodat gebruikers informatie verstrekken of besliss
Hoe maak je een knop Pinback zonder een knop-Machine

Hoe maak je een knop Pinback zonder een knop-Machine

Pinback knoppen, een afkorting voor pin badges en pin-ons, worden vaak zonder een knop-machine gemaakt. Vindingrijk individuen en groepen doen voor campagnes, fondsenwervers en marketing, alsook wat betreft de artistieke broches, geschenken, aan uitd
Hoe maak je een lopende tekst in HTML

Hoe maak je een lopende tekst in HTML

HTML-code, die voor Hyper Text Markup Language staat, is de code die meestal wordt gebruikt door ontwikkelaars van het Web voor het maken van websites. Zelfs wanneer functies zoals Flash of Javascript worden gebruikt, zijn ze ingebed in de HTML van d
Hoe maak je een knop sjaal

Hoe maak je een knop sjaal

Een knop sjaal is een trendy draai aan de klassieke sjaal of koel weer wrap. Dit van brei- of haakwerk wrap dekt alleen de nek en de bovenste schouders, en vastmaakt met twee grote knoppen. Er zijn eindeloze variaties op de dikte en vormgeving van de
Hoe maak je een iframe transparant in HTML

Hoe maak je een iframe transparant in HTML

Unidirectioneel om te laten zien dat bezoekers van de site een interessante Web page-object is verbergen. HTML-dekking effecten, ondersteund door alle moderne browsers, kunnen ontwikkelaars om de transparantie van objecten verschijnen op een webpagin
Hoe maak je een knop zichtbaar in JavaScript

Hoe maak je een knop zichtbaar in JavaScript

De JavaScript document-objectmodel, of DOM, kan webontwikkelaars zoeken, benaderen en bewerken van webpagina objectkenmerken. Zodra JavaScript wordt gebruikt voor een correcte identificatie een objectverwijzing, kunt meestal door het gebruik van de i
Hoe maak je een Flash Banner met HTML

Hoe maak je een Flash Banner met HTML

Flash-banners zijn geanimeerde afbeeldingsbestanden die vaak advertentie-inhoud bevatten. Zij zijn een veel voorkomend fenomeen op het Web. De meeste mensen hebben gezien talloze Flash banners langs de toppen van webpagina's. Ze zijn meestal kort en
Hoe maak je een knop in CSS

Hoe maak je een knop in CSS

De knoppen op uw webpagina's, zijn wanneer opgemaakte links, waarschijnlijk verschillende in elke browser weergegeven. U kunt uw Web ontwerpen met behulp van cascading style sheet (CSS) code aan knoppen om de rest van uw site te verbeteren. De twee k
Hoe maak je een knop op PowerPoint

Hoe maak je een knop op PowerPoint

PowerPoint is een presentatie van de krachtige en meest gebruikte softwareprogramma, maar haar capaciteiten gaan ver buiten het creƫren van boeiende diapresentaties en andere presentaties. PowerPoint kan worden gebruikt om effectieve productdemonstra
Hoe maak je een knop met aanwijseffect op Joomla!

Hoe maak je een knop met aanwijseffect op Joomla!

Aangezien Joomla gebruiker-bewerkt hypertext markup language code toelaat, kunt u aangepaste HTML-code aan speciale effecten toevoegen aan uw site. Een eenvoudige effect toe te voegen is de knop met aanwijseffect, ook wel aangeduid als de knop van de
Hoe maak je een nieuwe alinea in HTML

Hoe maak je een nieuwe alinea in HTML

HyperText Markup Language of HTML, kunt u gewone tekst converteren naar webpagina's door een tekst editor. Met HTML kunt u toevoegen opmaakinstructies, bekend als codes, om te vertellen van browsers uw tekst weergeven. Voor meeste opmaakopdrachten, m
Hoe maak je een knop Audio geluid

Hoe maak je een knop Audio geluid

Bij het opzetten van een multimediale site, is een van de meest populaire vormen van muziek of geluid toevoegen aan uw webpagina een audio knop geluid op de pagina te plaatsen. Een knop geluid kan bezoekers van de site te luisteren naar muziek of een
Hoe maak je een knop ingedrukt Shirt

Hoe maak je een knop ingedrukt Shirt

Patroon-maken is een opleiding voor vereist mode-ontwerp. Zowel beginners als gevorderden patroon maken kunnen werken met bestaande shirt patronen te leren kennen met de aanpassing van de patroon, snijden en stiksels. Maken van een originele fundamen