Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Button-Varianten</h1>
<h2>Kein echter Button</h2>

<div class="fake-button">Ich bin KEIN Button</div>

<h3 class="fake-button">Ich bin KEIN Button</h3>

<p>Mit ein wenig CSS habe ich hier einen <code>DIV</code>-Container und eine Überschrift so aussehen lassen, als handele es sich um einen -Button. Doch die schlichte Optik erzeugt keine Funktion. Alle Button-Eigenschaften müssten per JavaScript nachgerüstet werden. Ein wirklich sinnloses Unterfangen.</p>

<h2>Ein ungestalteter Button</h2>

<button type="button">Ich bin ein echter Button</button>

<p>Ich habe hier bewusst keine Gestaltung eingefügt, um die armseligen Browserstyles zu demonstrieren. Schauen Sie sich diesen Button am Besten auf unterschiedlichen Betriebssystemen und in unterschiedlichen Browsern an. Das Ergebnis ist immer unterschiedlich. <br>Alle anderen Beipiele dieser Seite sind hingegen immer identisch, egal auf welchem Betriebssystem und mit welchem Browser man den Test macht.</p>

<h2>Ein gestalteter Button</h2>

<p>Den hover-Effekt mit <code>cursor:pointer</code> muss man händisch hinzufügen. Die Browser-Stylesheets sehen kein visuelles Feedback vor. Ich persönlich empfinde es als wichtig.</p>

<button type="button" class="real-button">Ich bin ein echter Button</button>

<h2>Ein Test mit <code>appearance</code></h2>

<button type="button" class="button-appearance">Ich bin ein echter Button</button>

<p>So richtig viel tut sich nicht, wenn man <code>appearance: none</code> eingibt. Die Border muss immernoch selber per CSS wegdefiniert werden. In Chrome unter macOS fehlen dank der hier getesteten Eigenschaft schlicht die runden Ecken. Wow! Für Buttons ist diese Eigenschaft also eher unwichtig.</p>

<h2>Ein Button sieht wie ein Link aus</h2>

<p>Mit ein wenig CSS kann ich einen Button so weit verändern, dass er wie ein Link ausschaut. Das macht ihn nicht zum Link. Aber es reduziert die optische Wucht eines normalen Buttons. Allerdings sollten wir immer bedenken, dass unsere User sich über die Jahre an optische Merkmale gewöhnt haben und diese mit bestimmten Elementen in Verbindung bringen.</p>
<p>Das gilt natürlich auch umgekehrt für die Gestaltung eines Links in Button-Optik. Keine der beiden Varianten ist wirklich empfehlenswert.</p>

<button class="button-looks-like-a-link" type="button">Ich bin ein echter Button!</button>
              
            
!

CSS

              
                .fake-button {
  display: inline-block;
  padding: 8px;
  background-color: #a20000;
  color: #fff;
  cursor: pointer;
  font-weight: normal;
  font-size: 1rem;
}

.fake-button:hover,
.fake-button:focus {
  background-color: #000;
}

/* =========== */
.real-button {
  border: none;
  padding: 8px;
  background-color: #a20000;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}

.real-button:hover,
.real-button:focus {
  background-color: #000;
}

.button-appearance {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}


.button-looks-like-a-link {
  border: none;
  background: transparent;
  text-decoration: underline;
  padding: 0;
  display: inline;
  font-size: 1.5rem;
  cursor: pointer;
}

.button-looks-like-a-link:hover,
.button-looks-like-a-link:focus {
  text-decoration: none;
}

h2:not(:first-of-type) {
  border-top: 1px solid #000;
  padding-top: 20px;
}
h2 {
    margin-top: 40px;
}
              
            
!

JS

              
                
              
            
!
999px

Console