javascript css-knop

| | | | | | | |

Bij het ontwerpen van een website heb je vaak een knop waarmee je wilt dat deze op een bepaalde manier wordt weergegeven. U wilt bijvoorbeeld dat een knop een achtergrondkleur heeft dan andere elementen op de pagina om de aandacht van de gebruiker op de knop te vestigen.

Met CSS kunnen ontwikkelaars knoppen met stijlen maken. Met CSS kun je onder andere wijzigen.

kleur, tekstgrootte, rand, breedte en hoogte van een knop. In deze tutorial wordt met voorbeelden besproken hoe je een reeks CSS-eigenschappen kunt gebruiken om een HTML op te maken knop. Tegen de tijd dat u klaar bent met het lezen van deze tutorial, bent u een expert in het opmaken van knoppen met CSS.

Overzicht van knoppen

U kunt een knop op een aantal HTML-manieren definiëren. De twee meest voorkomende benaderingen zijn Vind uw Bootcamp-match

Als we onze knop willen stylen, met andere woorden, om het uiterlijk van de pagina aan te passen, moeten we css gebruiken. In dit artikel zullen we bespreken hoe we het volgende op een knop kunnen doen: ..

  • Achtergrondkleur wijzigen
  • Tekstkleur wijzigen
  • Verander de grootte van de tekst.
  • Voeg opvulling toe.
  • om de hoeken.
  • Voeg een gekleurde rand toe.
  • Gebruik het: .... hover-functie
  • Voeg schaduw toe
  • Breedte wijzigen
  • uitschakelen
  • Animeren.

We zullen ook bespreken hoe u groepen horizontale en verticale knoppen kunt maken.

Achterkant - vlakkleur

Tijdens het ontwerpen van een knop, is het eerste dat u misschien wilt doen een achtergrondkleur instellen - plan voor knop. Standaard heeft een knop een witte achtergrond en zwarte tekst. Door de CSS-achtergrondkleur te gebruiken, kunnen we en verander de achtergrondkleur van een knop.

Stel dat je een knop voor een website ontwerpt en je wilt dat de knop een roze achtergrond heeft. We kunnen de kleur van onze knop wijzigen met de volgende CSS-code:

Onze code geeft als resultaat:

Screen Shot 2020 04 03 tot 13.10.32

Met behulp van de achtergrondkleureigenschap hebben we de achtergrondkleur gewijzigd van onze knop in roze. Met deze eigenschap kunnen we de achtergrondkleur van onze knop in een kleur veranderen.

Tekstkleur

Om de tekstkleur van een knop te wijzigen, kunt u de kleureigenschap. een knop en wil dat de knop een roze achtergrond heeft en de tekst groen. We zouden deze knop kunnen maken met de volgende code:

Onze code geeft als resultaat:

 ad Dtfk7RIpGyKmzp9eDBrGsFWlOFbIn WMLsfL2IlEEs4TFEHnscuJ3bhsZdx5GEz3zR2bv5Ec3W2eH49suj BISbjhj Ib0gv 4ETJxxUJRp Mxzhop8cvg2 we gebruiken in de groene figuur <x> 8gy> 8gy>> we gebruiken de eigenschap MxzPG8cvG2: om de kleur van de tekst in te stellen r groene knop.</p><h2>Tekstgrootte</h2><p>U kunt de eigenschap CSS font-size gebruiken om de grootte van de tekst in een knop in te stellen. Laten we zeggen dat we willen dat de tekst een lettergrootte van 20px heeft. We kunnen dit bereiken door de volgende code te gebruiken:</p> <p>Onze code geeft als resultaat:</p><figure class = Screen Shot 2020 03 25 A 08.33.23

Onze knop heeft dezelfde grootte als voorheen, maar nu de grootte van de tekens binnenin is 20 px. We hebben het kenmerk font size gebruikt om de grootte van de tekst in onze knop in te stellen.

Opvulling

Als je een knop ontwerpt, kun je ervoor kiezen dat je wilt een bepaalde hoeveelheid ruimte tussen de tekst in een knop en de buitenmuren van de knop. Dit is waar de dempingseigenschap in het spel komt.

De opvuleigenschap gebruikt lengte-indicatoren (px, em en enzovoort ) of percentagewaarden ‚Äã‚Äãom een bepaalde hoeveelheid ruimte tussen tekstknoppen en de randen te definiëren.

Stel dat we twee knoppen op onze pagina willen maken. De ene knop moet 40px opvulling hebben en de andere moet 20px opvulling hebben. We kunnen deze knoppen maken met de volgende code:

Onze code geeft als resultaat:

 Screen Shot 2020 03 25 tot 08.39.39

U kunt de eigenschap border-radius gebruiken om rechthoekige knoppen met afgeronde hoeken te maken. Hier zijn drie codevoorbeelden die de eigenschap border-radius gebruiken. Om het effect van verschillende straalgroottes te illustreren, gebruikt elk voorbeeld een randstraal van een andere afmeting.

Onze code geeft als resultaat:

 Screen Shot 2020 03 25 at 08.49.42