Tutorials von Thomas Frei-Herrmann

Formular-Button als Grafik mit CSS-Class

Geht mit der Maus über die “Senden” Schaltfläche um die Formatierungen zu sehen. Ich erhalte keine Mail.

Ich habe hier dem Button und auch den Eingabefeldern eigene CSS-Klassen gegeben. Die Eingabefelder sind ganz normale, selbst erstellte  CSS-Klassen, die man dann im Fenster “Eingabefeld-Eigenschaften” bei “Design” wählen kann. Hier lediglich Blau und Rot.

Für die grafische Schaltfläche bin ich wie folgt vorgegangen:

Zunächst lest Ihr Eure Grafik (hier: “Senden.png”) in der Assets-Verwaltung ein und hakt “Datei immer publizieren” an, damit NOF die Grafik für die Schaltfläche überhaupt kennt.

Kopiert diesen CSS-Code dann in die Layout-HTML Eurer Seite.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<style type="text/css">

    .imageButton {
        opacity:.6; /* Firefox */
        filter:alpha(opacity:60); /* Internet Explorer */
    }
    .imageButton:hover {
        opacity:1; /* Firefox */
        filter:alpha(opacity:100); /* Internet Explorer */
    }

</style>

Zieht Euch anstelle der Schaltfläche ein kleines Textfeld auf und kopiert den an Eure Bedürfnisse angepassten Code mit dieser Class  in den HTML-Code Editor dieses Textfeldes. Achtet auf die relative Pfadangabe zu der Grafik (von der “Home” nur mit einem Punkt ./ ).

<input type="image" src="../assets/images/Senden.png" alt="Senden" title="Formular senden" id="SendenButton" name="SendenButton" style="height: 30px; width: 110px;" class="imageButton">

Viel Erfolg !