Verwenden Sie ein Bild als Schaltfläche in HTML und Css

Question

Ich habe eine Game Assets-Sammlung verwendet, um ein Spiel zu erstellen. Das Hauptproblem, das jetzt auftritt, ist, wie die Benutzerschnittstellentasten eingefügt werden.

Derzeit ist ein Button eine Sammlung verschiedener Farbverläufe und einer bestimmten Schriftart. Ich habe versucht, den Bildverlauf in eine Hintergrundeigenschaft zu konvertieren, aber dies ist fehlgeschlagen, und die Schriftart, die verwendet wird, ist eine Sammlung von Zeichen, die durch Bilder dargestellt werden.

Was ist die beste Vorgehensweise, um dieses Problem zu lösen? Verwenden Sie die Bilder als Schaltfläche? Was ist das korrekte semantische Markup?

Example of a Button

Semantic des Button

Thnx! für die Antwort auf diese Frage, aber es geht nicht darum, wie es geht; aber über das korrekte Semantic Markup.

Momentan habe ich es mit dem folgenden Setup gelöst, das vernünftig erscheint.

<label> 
    <img src="/aButton.png" alt="Send Message"> 
</label> 

Answer 1

Versuchen wie folgt

HTML

<input type="submit" id="search" name="submit" alt="search" value=""> 

CSS

input#search { 
background:url(../search-icon.png); 
background-repeat: no-repeat; 
width:40px; 
height:40px; 
border: 0; 
} 
input#search:hover { 
    background:url(../search-icon2.png); 
    background-repeat: no-repeat; 
    width:40px; 
    height:40px; 
    border: 0; 
    } 

Answer 2

Wenn Sie Eingabe verwenden möchten, versuchen Sie dies:

background-image: url(...); 
 
background-repeat: no-repeat; 
 
background-position: <left|right>; 
 
padding-<left|right>: <width of image>px;

<button type="submit"><img></img></button>