Visforms versucht sich so weit wie möglich ins Layout das verwendeten Templates einzupassen und kommt deshalb mit so weinig eigenem CSS wie möglich.
Prinzipiell kann man hinsichtlich der Joomla! Templates 3 Gruppen unterschieden. Bootstrap 2 Templates, Bootstrap 3 Templates und "nicht Bootstrap" Templates. Das spiegelt sich in Visforms in den entsprechenden Layout-Gruppen (Boostrap, Bootstrap 3 und Default" wieder.)
Um mit jeder dieser 3 Gruppen gut zusammenzuarbeiten hat Visforms 2 getrennte CSS Dateien, eine visforms.min.css, die das CSS enthält, das von allen Layouts benötigt wird und eine visforms.css die zusätzliches CSS enthält, das nur für das Detault-Layout benötigt wird, also wenn die Webseite kein Bootstrap Template verwendet. Je nachdem welches Visforms Layout gewählt wird, werden also nur eine (die visforms.min.css) oder 2 (zusätzlich die visforms.css) Dateien eingebunden.
In der visforms.css, die eigentlich nur für die nicht Bootstrap Webseiten gedacht ist, ist eine Regel drin, die auch die Button formatiert und zwar mit transparenter Hintergrundfarbe (also die Hintergrundfarbe scheint durch). Da die Bootstrap Formatierungen für Button extrem schwach sind, überschreiben die Visforms-Regeln, die von Bootstrap-Regeln. Deshalb sollte das "Default" Layout von Visforms nicht mit Bootstrap Templates verwendet werden, sondern ein entsprechendes Bootstrap Layout gewählt werden.
Die korrekte Lösung des Problems ist also ein Umsteigen auf ein Bootstrap-Layout, aber nicht jeder will das, weil die Bootstrap Layouts teilweise etwas eigen sind.
Alternativ kann das Problem mit eigenem CSS gelöst werden. Dieses sieht, abhängig von der Formatierung der Button im eigenen Template teilweise etwas unterschiedlich aus.
Konkret verursacht wird das Problem durch folgende Regel im visforms.css auf Zeile 18ff, die auch auf die Buttons angewandt wird.
.visform input, .visform select, .visform textarea {
border: 1px solid #999;
padding: 2px;
background: none;
}
Um diese Regel zu überschreiben, kann der Selektor .visform input.btn verwendet werden.
Die drei Regeln von oben müssen dann mit den Button CSS des eigenen Templates überschreiben werden. Also die Hintergrundfarbe, das Padding und der Border. Dies könnte z.B. folgendermaßen aussehen:
.visform input.btn {
background-color: #3a405a;
padding: 10px 22px;
border-color: rgba(255, 255, 255, 0.4);
}
Am besten schreibt man diesen Code in ein eigene CSS-Datei für Visforms rein, die entsprechend den Anweisungen in diesem Dokumentationsbeitrag erstellt wird. Formular Layout mit CSS anpassen