HTML/Tutorials/Buttons und Schalter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Für die bedienungsfreundliche Nutzbarkeit von Webseiten spielt ein gutes UI-Design eine große Rolle. Nur wenn UI-Elemente schnell und intuitiv erkannt und bedient werden können, werden die Nutzer Ihrer Webseite die vorhandenen Angebote nutzen.

In diesem Tutorial lernen Sie, wie Sie UI-Elemente wie Call-To-Action-Buttons und Flip Flop-Schalter mit den passenden HTML -Elementen erzeugen und mit CSS gestalten.

Vorüberlegungen[Bearbeiten]

semantisches HTML[Bearbeiten]

Buttons sind im Allgemeinen Bedienfelder, mit denen eine Aktion ausgelöst werden kann. Für sie sollten stets die semantisch passenden Elemente wie das button-Element verwendet werden. Gründe für seinen Einsatz werden im Selfhtml Blog-Artikel input oder button für submit-Elemente? genannt.

Oft gibt es aber auch mehrere Buttons, die mehrere Möglichkeiten zur Auswahl bieten. Hier würde eine Verwendung von button-Element zwingend den Einsatz von JavaScript zur Auswertung erfordern. Eine Verwendung des select-Elements oder von Radio-Buttons bzw. Checkboxen ist auch ohne JavaScript oder CSS noch funktionsfähig. So können Auswahlmenüs und auch Toggle-Buttons realisiert werden.

In den Kapiteln Radio-Buttons verstecken und FlipFlop-Schalter erfahren Sie, wie solche Radio-Buttons und Checkboxen mit CSS gestylt werden können.

Beachten Sie: Buttons sollten nie mit einem a-Element mit javascript:function () realisiert werden, da dies gegen die Trennung von Inhalt, Präsentation und Verhalten verstößt. Falls das JavaScript nicht geladen wird, bleibt die Seite funktionsunfähig.

Darstellung mit CSS[Bearbeiten]

Auch wenn es noch einige Stimmen gibt, die das Styling von Buttons ablehnen, ist es doch sinnvoll die Gestaltung von UI-Elementen an verschiedene Viewports und das Look and Feel der Webseite anzupassen.

Besonders bei mobilen Geräten mit sehr kleinen Viewports ist es sinnvoll, Buttons nicht in der Standard (schrift)größe, sondern größer darzustellen, da Finger und Daumen mehr Platz benötigen als ein Mauszeiger.

Empfehlung: Verwenden Sie für die mobile Ansicht eine größere Höhe und Schriftgröße. Eventuell ist es sinnvoll, den Button über die halbe oder gesamte Seitenbreite zu dimensionieren. Erst bei größeren Viewports erhält der Button kleinere Abmessungen.

Verwenden Sie als Hintergrund die Akzentfarbe, um Buttons schnell und intuitiv erkennbar zu machen.

Anwendungsbeispiele[Bearbeiten]

Beispiel ansehen …
  <h2>Einsatz von HTML-Elementen</h2>
  span-Element mit Klasse: 
  <button type="button">Passwort <span class="hinweis">ändern!</span></button>
  <button type="button"><strong>Passwort</strong> <span class="hinweis">ändern!</span></button>

  <h2>Einbinden von Bildern</h2>
  <button type="button" class="speichern">✔ Speichern!</button>
  <button type="button" class="abbruch" >✘ Abbrechen!</button>

  <button type="button" class="hinweis weiss">
    <img src="Mülleimer.png" alt=""> Löschen!
  </button>
In der ersten Gruppe wird der Text unterschiedlich dargestellt. Im linken Button wurde dem span-Element die Klasse hinweis zugewiesen, wodurch die rote, fette Schrift erzeugt wird.

Rechts ist das erste Wort innerhalb eines strong-Elements und dadurch fett dargestellt.

In der zweiten Gruppe wurden die Buttons durch eingebundene Grafiken verständlicher.

Die beiden linken Buttons haben zusätzlich zum Text utf-8 Symbole zur Veranschaulichung.


Beachten Sie:
Manche Unicode-Zeichen wie der hier verwendete HEAVY CHECK MARK 2714 haben in auf Mobilgeräten verwendeten Fonts eine eigene, nicht durch CSS zu ändernde Textfarbe. Hier wäre der Einsatz von SVG-Icons zu empfehlen.
Siehe auch: → Unicode: Darstellung


Bonbon-Buttons[Bearbeiten]

Bonbon-Buttons zeigen die Möglichkeiten der Gestaltung durch CSS.

Beispiel ansehen …
.bonbon {
    width: 200px;
    height: 60px; 
    background: yellow; /* old browsers */
    background: linear-gradient(to bottom, white, yellow); 
    box-shadow: inset 0px 0px 6px #fff,inset 0px -1px 6px #fff;
    border: 1px solid #5ea617;
    border-radius: 1em;
    margin: 1em;
  }
 
  .bonbon.rot {
     background: linear-gradient(to bottom, white , red); 	
  }	
 
  .bonbon.orange {
     background: linear-gradient(to bottom, white, orange); 	
  }		
 
  .bonbon:hover,
  .bonbon:focus {
    box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
  }
Verläufe im Hintergrund und Schlagschatten sorgen für einen 3D-Look.

Diese Bonbon-Buttons dienen eher dazu, die Möglichkeiten von CSS3 aufzuzeigen, als dass sie praktisch anwendbar wären.

Ghost-Buttons[Bearbeiten]

Unter Ghost-Buttons versteht man Links oder Buttons, die auf ein Minimum reduziert werden. Sie verzichten auf typische Link-Effekte wie text-decoration, besitzen keine Hintergrundfarbe und haben meist nur einen sehr dünnen Rand. Damit sind sie quasi ein Schatten ihrer selbst – ein Geist.

Beim Berühren oder Drüberfahren mit der Maus ändern Sie dann Text- und Hintergrundfarbe.

Beispiel ansehen …
<p class="choice">
	<button id="win">Windows</button>
	<button id="and">Android</button>
	<button id="mac">Apple</button>
</p>
p.choice {
	margin-top: 6em;
}
button {
	position: relative;
	margin: 2em;
	padding: .5em 1em;
	width: 8em;
	background: transparent;
	color: white;
	border: 1px solid white;
	border-radius: 3px;
	cursor: pointer;
	transition: all ease 2s;
}
button:hover, button:active {
	outline: none;
	background: white;
	color: darkblue;
}
button::before, button::after {
	position: absolute;
	width: 100%;
	height: 150px;
	left: 0;
	color: white;
}
button::before {
	content: " ";
	top: -120px;
	background: none center no-repeat transparent;
	background-size: 30px 30px;
	transition: all ease 1s;
	transform: rotate(0deg);
}
	button:hover::before {
	background-size: 80px 80px;
	transform: rotate(360deg);
}
button::after {
	bottom: -520%;
	transition: transform ease-in .5s, opacity ease-out 1s;
}
#win::before {
	background-image: url(/images/2/29/Win.png);
}
#and::before {
	background-image: url(/images/3/32/And.png);
}
#mac::before {
	background-image: url(/images/6/69/Mac.png);
}
#win::after {
	content: "7, 9, 10";
	transform: translatex(-200%);
	opacity: 0;
}
#win:hover::after {
	transform: translatex(0);
	opacity: 1;
}
#and::after {
	content: "4.3, 4.4, 5.0";
	transform: translatey(200px);
	opacity: 0;
}
#and:hover::after {
	transform: translatey(0);
	opacity: 1;
}
#mac::after {
	content: "iOS 7, iOS 8";
	transform: translatex(200%);
	opacity: 0;
	transition: transform ease-in .5s, opacity ease-out 1s;
}
#mac:hover::after {
	transform: translatex(0);
	opacity: 1;
}
In diesem Beispiel werden die Buttons nach dem Vorbild sogenannter Ghost-Buttons gestaltet. Hierbei handelt es sich um sehr minimalistisch gehaltene Elemente, die sich gerade deshalb vom Hintergrund abheben.

Radio-Buttons verstecken[Bearbeiten]

Wenn Sie den Benutzern Ihrer Webseite eine Auswahl aus mehreren Möglichkeiten anbieten, ist ein Menü aus Radio-Buttons semantisch die beste Wahl. Häufig soll dies aber an das Seitendesign angepasst werden. Im folgenden Beispiel werden die Radio -Buttons versteckt - die Funktionalität bleibt jedoch erhalten.


Beispiel: HTML-Struktur ansehen …
    <div class="toggle-buttons">
      <input type="radio" id="b1" name="group-b"/>
      <label for="b1">Pizza</label>
      <input type="radio" id="b2" name="group-b"/>
      <label for="b2">Pasta</label>
      <input type="radio" id="b3" name="group-b" />
      <label for="b3">Pommes</label>
    </div>
Unser Menü besteht aus input-Feldern vom type="radio". Über den gemeinsamen name ist festgelegt, dass nur eine Auswahl erlaubt wird. Die folgenden label-Elemente werden über das for-Attribut mit der id des zugehörenden input-Elements verbunden. Damit können Sie den Radio-Button auch mit einem Klick auf die Erklärungen auswählen.
Beispiel: CSS ansehen …
.toggle-buttons input[type="radio"]{
    visibility:hidden;
}
.toggle-buttons label {
  border: 1px solid #333;
  border-radius: 0.5em;
  padding: 0.5em;
}
 
.toggle-buttons input:checked + label {
  background: #ebf5d7;
  color: #5a9900;
  box-shadow: none;
}
Über den Attributsselektor input[type="radio"] werden alle Radio-Buttons mit visibility: hidden; ausgeblendet.

Labels erhalten einen (abgerundeten) Rand, der durch ein padding von 0.5em vergrößert wird.

Bei der Auswahl eines Radio-Buttons wird über den Nachbarselektorinput:checked + label das dazugehörende label grün eingefärbt. Ein evtl. vorher angeklickter Button verliert dann seine Pseudoklassechecked und fällt wieder in seinen Urzustand zurück.

FlipFlop-Schalter[Bearbeiten]

Ein FlipFlop-Schalter oder toggle-Button ist ein Software-Feature, das zwischen zwei Zuständen hin- und her schaltet.

Beispiel: HTML-Struktur
      <label>
        An-/Aus-Schalter   
        <input type="checkbox">
        <span></span>
      </label>
Für das Beispiel verwenden wir ein input-Feld vom type="checkbox", das zusammen mit einem span-Element in einem label-Element verschachtelt ist.


Beispiel: CSS - FlipFlop-Schalter ansehen …
.toggle label {
  position: relative;
  display: inline-block;
  width: 10em;
  height: 3.5em;
}

.toggle input {
  display: none;
}
 
.toggle  .slider {    /* Grundfläche */
  position: absolute;
  cursor: pointer;
  top: 1.5em; 
  left: 2em;
  width: 4em;
  height: 2em;
  background-color: #c32e04; /* red */
  border-radius: 1em; 
  transition: all .3s ease-in-out;
 
}
 
.toggle  .slider:before {  /* verschiebbarer Button */
  position: absolute;
  content: "";
  height: 1.6em;
  width: 1.6em;
  left: 0.2em;
  bottom: 0.2em;
  background-color: white;
  border-radius: 50%;
  transition: all .3s ease-in-out;
}
Das label wird zum Ausgangspunkt des Schalters, an dem absolut ausgerichtete Elemente orientiert sind.

Die Checkbox wird mit display: none ausgeblendet. Allerdings ist sie trotzdem funktionsfähig und ihr Zustand kann mit einem Klick auf das label aktiviert werden.

Die Grundfläche des Sliders span class="slider" wird absolut unterhalb der Beschreibung positioniert.

Mit .slider:before{} wird nun ein Pseudoelement absolut über die Grundfläche positioniert. Es erhält die Form eines kreisförmigen, weißen Buttons.
.toggle input:checked + .slider {
  background-color: #5a9900; /* green */
}
 
.toggle  input:checked + .slider:before {
  transform: translateX(1.9em);
}
Sobald der FlipFlop-Schalter angeklickt wird, ändert sich der Zustand der (nicht sichtbaren) Checkbox. Über die Pseudoklasse checked und den Nachbarselektor + wird nun die Hintergrundfarbe der Grundfläche und die Position des weißen Buttons verändert.
Beispiel: flipFlop-Schalter mit Text ansehen …
.text  .slider:after {  /* Text vor dem FlipFlop-Schalter */
  position: absolute;
  content: "AUS";
  color: #c32e04;
  font-weight: bold;
  height: 1.6em;
  left: -2.5em;
  bottom: 0.2em;
}
 
.text input:checked + .slider:after {  /* Text hinter dem FlipFlop-Schalter */
  position: absolute;
  content: "AN";
  color: #5a9900;
  left: 4.5em;
}
Das untere Beispiel erhält ein weiteres Pseudoelement. Mit der content-Eigenschaft erhält es eine Beschreibung des Zustands in der passenden Farbe. Sobald der Schaltzustand geändert wird, wird ein neuer Text an anderer Stelle und in einer anderen Farbe eingeblendet.

Siehe auch:

Weblinks[Bearbeiten]