from Wikipedia, the free encyclopedia
Different buttons
Command buttons
Toolbar with buttons

A button or key , too (English) Button is a commonly used control graphical user interfaces , trigger, which allows the user an assigned function.


The designation button is predominantly in the Windows - terminology used while under Linux and macOS instead the term key is usual. The term button is misleading because a switch usually turns something on and off (toggle between two stable states), while a button (or push button ) only transmits a button pulse (the button was pressed and released). Most of the controls work like a button, so start a process with "pressure" (ie after a mouse click or by a keyboard shortcut ); Real "switching" elements are the flip-flop buttons that "lock" in place - and are then usually displayed accordingly or change the labeling - and disengage again with the second click, or control elements that switch through several switching states, for example for text markups in word processing (bold, italic, etc.), or editing modes in image processing . In technology, switching device is the generic term for buttons and switches.

In the relevant literature, the English term button "(push) button" is common. In the Amiga Workbench , the buttons are part of the "gadgets", the collective term for all operating elements (in addition to, for example, pictograms / icons ).

Some very common examples of buttons are:

  • An OK button to confirm actions and close the window
  • A Cancel button to discard changes or cancel actions and close the window
  • A button Apply to close for accepting changes or confirms actions without the window
  • A Close button to close windows after changes have already been applied

Visual representation

Buttons in agraphical user interface; the “light” comes from the top left.A appears protruding, B depressed. The boundary line is two pixels wide at the top and just one pixel at the bottom.

The appearance of buttons is usually determined by the operating system used. With sufficiently largeThe appearance can, however, also be adapted as required with the help of programming.

Because of a perceptual effect of the human visual system, a button appears “protruding (three-dimensional)” when its upper boundary is light and its lower boundary is dark. In the opposite case, the button appears "pressed in". This effect is based on the fact that the human eye is used to objects being "illuminated from above". In addition, buttons can be shown brightened when they are pressed in order to simulate a glow or to carry out other color changes. Often the 3D effect only appears when you move the mouse pointer over the button ( hovering ) or activate it with the keyboard.

In addition to fonts, icons are also common for buttons , which symbolize the function of the button.

Simple ticks or dots are also common for flip-flops ( radio buttons ) .

Buttons in HTML

Example of imgbutton

The elements and are used in HTML . These elements, as well as simple text references ( element that contains pure text) can be designed graphically using CSS , e.g. B. by assigning different frame colors to simulate a 3D effect. With the new CSS3 standard , more complex designs can also be implemented without the use of images using color gradients, etc. Many CSS frameworks provide ready-made templates for design. inputbuttona

Buttons are mostly used to submit form data or to make links graphically attractive.

Application programs

In application programs, buttons are used to address the individual control commands of a program. They are arranged in the menu bars (switching bars ) around - or freely above - the work surface of a window .


The following example, implemented with ASP.NET , shows the implementation of a website with a button and the linking of the click event with an event handler (see event ).

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    // Registriert die Ereignisbehandlungsmethode für das Klick-Ereignis des Buttons.
    void Page_Load(Object sender, EventArgs e)
        BeispielButton.Click += new EventHandler(this.BeispielButton_Click);

    // Wenn der Button angeklickt wird, wird die Beschriftung geändert und der Button deaktiviert.
    void BeispielButton_Click(Object sender, EventArgs e)
        Button button = (Button)sender;
        button.Text = "Der Button wurde angeklickt.";
        button.Enabled = false;

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <form id="form1" runat="server">
      <asp:Button id = "BeispielButton"
           Text = "Klick hier, um die Beschriftung zu ändern."
           OnClick = "BeispielButton_Click" // Verknüpft die Ereignisbehandlungsmethode mit dem Klick-Ereignis.
           runat = "server" />

Web links

Commons : Buttons  - collection of images, videos and audio files
Wiktionary: button  - explanations of meanings, word origins, synonyms, translations

Individual evidence

  1. W3Schools: HTML <button> tag
  2. Microsoft Docs: Button.Click Event