Bootstrap Ganzes Bild als Button

Ich versuche, eine süß aussehende Schaltfläche in Bootstrap zu erstellen. Ich habe 4 Bilder, die die diskreten Zustände meiner Taste (Normal, Hover, gedrückt, deaktiviert) zeigen.Bootstrap Ganzes Bild als Button

Aber ich kann nicht herausfinden, was die beste Praxis dafür ist. die src in einem input-type-bild zu verwenden, scheint nicht so gut zu funktionieren, da browser eine blaue rect beim clicken erzeugen.

(Ich brauche nur das gesamte Bild der Schaltfläche sein, es ist nicht ein Logo oder smth, die auf einer bestimmten Position angezeigt werden muss)

EDIT: seine für meine benutzerdefinierte facebook/google/Ausblick Login Tasten

Quelle

2017-06-28 Moritz Schöfl

Sie müssen die URLs durch die Bilder ersetzen, die Sie haben.

.fb { 
 
    background: url(http://placehold.it/50x20/00ff00); 
 
} 
 

 
.fb:hover { 
 
    background: url(http://placehold.it/50x20/0000ff); 
 
} 
 

 
.outlook:disabled { 
 
    background: url(http://placehold.it/50x20/000000); 
 
    color: white; 
 
} 
 

 
.fb:active { 
 
    background: url(http://placehold.it/50x20/666666); 
 
}

<button type="button" class="fb">button</button> 
 
<button type="button" class="outlook" disabled>button</button>

Quelle

2017-06-28 08:43:27 Gerard

danken Ihnen diese tatsächlich funktioniert, aber nur dann, wenn die Breite auf die genaue Breite des Bildes einstellen, gibt es eine Abhilfe für dieses? –

Sie können einen Wert für die Hintergrundgröße festlegen. Experimentieren Sie mit 100%, decken Sie und enthalten Sie, um zu sehen, welches am meisten Ihren Bedürfnissen entspricht. – Gerard

Beste Praxis wird sein, zu verwenden: vor Elementen, wo Sie Bild auf "Knopf" anzeigen werden.

Quelle

2017-06-28 08:21:36 DanielWaw

Sie können img-Tag innerhalb Anchor-Tag verwenden, um dies zu tun Zum Umschalten zwischen den Zuständen können Sie jQuery verwenden.

Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen !!

Quelle

2017-06-28 08:22:22

Bootstrap Ganzes Bild als Button

Antwort

Verwandte Themen