Meine Codebeispiele findet man jetzt auch in der codepen Community. Den Anfange mache ich mit einem einfachen CSS Snippet, der ein inline SVG als Hintergrund-Grafik in ein Input Feld einbettet.

Ausgangspunkt war ein HTML input Button auf dem ich nur CSS anwenden konnte. Ich hatte also keine Möglichkeit das HTML zu erweitern.

<input type="submit" name="btn" value="Weiter">

Im folgendem CSS sieht man, was Möglich ist. Pseudoelemente (::before) kann man auf Input Felder nicht anwenden. Aber mit Background Images kann man arbeiten. Ich hab ein SVG inline verwendet. Leider wird diese Schreibweise (ich habe sie ausgeklammert) nur ab dem Internet Explorere Edge verwendet. Codiert man das SVG (Base 64 encode) allerdings, ist es ab dem alten Internet Explorer 9 anwendbar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

input[name="btn"] {
  display: block;
  margin: 5% auto;
  border: none;
 
  background-color: #144577;
  /* SVG arrow inline -> Base 64 Encoding works for IE 9+ */  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDc2OCA3NjgnPjxwYXRoIGQ9J00zMTkuNSAxOTJsMTkyIDE5Mi0xOTIgMTkyLTQ1LTQ1IDE0Ny0xNDctMTQ3LTE0N3onIGZpbGw9JyNmZmZmZmYnPjwvcGF0aD48L3N2Zz4=");  /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 768 768'><path d='M319.5 192l192 192-192 192-45-45 147-147-147-147z' fill='#ffffff'></path></svg>"); */  background-position: right 10px center;
  background-repeat: no-repeat;
 
  color: #fff;
  padding: 15px 42px 15px 32px;
  font-size: 16px;
  text-align: center;
  opacity: 1;
  transition: all 1s cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

Der Button bekommt noch eine leichte Hover-Animation. Die funktioniert im IE 9 zwar noch nicht, ist aber nun auch nicht entscheident.

1
2
3
4
5

input[name="btn"]:hover {
  background-position: right 5px center;
  transform: translateX(-5px);
  opacity: 0.6;
}

Das ganze kann man sich in meinem codepen.io/digiboarder Kanal live testen.

Beispiel ansehen

Ich arbeite ganz gerne mit SVGs, da sie im Normalfall sehr klein sind (kb). Sollten sie nicht codiert werden (zb. bei mobile Web Apps) kann man auch mit CSS oder Javascript in das SVG eingreifen, um Farben zu ändern, zu animieren oder mit dynamischen Werten zu füllen.