Transparante knoppen

Het is een beetje een hype geweest (2014 - 2017) op internet: Transparante navigatie-knoppen in de website. Vaak goed geslaagd, maar soms net iets te goed: dan zag je de knoppen bijna niet meer.
Op deze pagina wordt uitgelegd hoe je zulke transparante knoppen maakt.

Hieronder staan twee knoppen. Die lijken veel op elkaar, maar verschillen iets van elkaar. De linker knop is gemaakt met de HTML-tag <button>, de rechter met een <div>-tag. Beide knoppen zijn opgemaakt met CSS.

Beide knoppen zijn voorzien van een zeer subtiel hover-effect. De knoppen zijn niet gelinkt aan JavaScript of een <a>-tag; dat is voor dit voorbeeld niet relevant.

• Aanpak met een <button>-tag
• De HTML-button maak je met:
  <button class="HTMLknop" type="button">Klik me maar!</button>
   
• Hier hoort natuurlijk ook CSS bij, zie hier onder:
  <style>
.HTMLknop {
  width: 150px; height:40px;
  color:navy; font-weight:bold; font-size:1.2em;
  background-color:transparent;
  border:3px outset navy;
}
.HTMLknop:hover {
  border:3px inset navy;
}
</style>
   
• Om de button te positioneren in het document kun je de class="HTML-button" voorzien van bijvoorbeeld top- en left eigenschappen.
• Om de button wat te laten doen moet je een onclick attribuut toevoegen of addEventListener() gebruiken.
   
• Als de muis over de knop gaat, verandert de rand van outset in inset. De vormgeving van de knop zorgt voor een subtiel, nauwelijks zichtbaar effect. Dat is een direct gevolg van de gebruikte kleuren.
   
• Het hover-effect gaat grotendeels verloren door de gebruikte kleuren. Bij de button hier onder is het verschil beter zichtbaar. Dat komt doordat er een sterk contrast in aangebracht tussen "de muis is boven de knop" en "de muis is ergens anders".
   
  Klik me maar!
   
  
• De CSS voor deze knop verschilt maar weinig van de CSS voor de eerste knop:
  <style>
.HTMLknop {
  width: 150px; height:40px;
  color:navy; font-weight:bold; font-size:1.2em;
  background-color:transparent;
  border:3px solid navy;
}
.HTMLknop:hover {
  color:#e4e9f6;
  background-color:navy;
}
</style>
   
• De verschillen in de CSS zitten in de definitie van border: solid in plaats van outset - inset en in wat er gebeurt als de muis boven de knop komt:
  - De achtergrondkleur van de knop wordt gelijk gemaakt aan de kleur van de rand. Hier: navy.
  - De tekstkleur wordt gelijk gemaakt aan de achtergrondkleur van het document (hier: #e4e9f6, paars-blauw).
  Als je de knop op een foto zet, kies dan een tekstkleur die sterk contrasteert met de achtergrondkleur, bijv. zwart-wit.
  Het werkt niet om de tekstkleur transparent te maken; doorschijnende tekst is altijd onzichtbaar.
   
• Aanpak met een <div>-tag
• De DIV-button maak je met:
  <div class="CSSknop">Klik me maar!</div>
   
• Ook hier kun je niet zonder CSS:
  <style>
.CSSknop {
  width: 150px; height:40px;
  color:navy; font-weight:bold; font-size:1.15em;
  background-color:transparent;
  border:3px outset navy;
  text-align:center; padding-top: 0.5em;
  box-sizing:border-box;
}
.CSSknop:hover {
  border:3px inset navy;
}
</style>
   
• De CSS is bijna gelijk aan die voor de HTML-button. De verschillen zijn:
  - Er is text-align en padding-top toegevoegd om de knoptekst horizontaal en verticaal uit te lijnen.
  - De tekst-grootte is anders.
  - Er is gebruik gemaakt van box-sizing, waardoor het bepalen van de afmetingen wat eenvoudiger is.
• Met name het uitlijnen van de knoptekst is lastig als je knoppen maakt met <div>. De tag <button> heeft de voorkeur omdat het uitlijnen van de knoptekst eenvoudiger is.
• Voor het overige geldt voor <div>-knoppen hetzelfde als voor <button>-knoppen.