✔ input.button animieren (hover) über externe css

Status
Nicht offen für weitere Antworten.
D

D12

Mitglied
Hi All....

habe ein Problem mit einem Hover Effekt bei Buttons.

Ich möchte einen Button über ein ecternes css mit einer anderen Hintergrundfarbe oder einem Hintergrundbild belegen.

Ich weis nicht ob es geht und nicht wie es geht.
Meine CSS-Datei steht hier: http://www.pc24ac.de/downloads/styles.css
Mein Source Code für das Form lautet wie folgt:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <meta name="generator" content="Adobe GoLive 6">
        <link rel="stylesheet" type="text/css" href="../../../styles.css">
        <title>Titel</title>
    </head>
    <body bgcolor="#ffffff">
        <form action="(EmptyReference!)" method="get" name="FormName">
            <table width="163" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="3">
                        <p>Anmelden/Registrieren</p>
                    </td>
                </tr>
                <tr>
                    <td width="48%">Name</td>					
                    <td width="15"></td>
                    <td width="48%"><input type="text" name="textfieldName" 
                        size="18" maxlength="24"></td>
                </tr>
                <tr>
                    <td width="48%">Passwort</td>
                    <td width="15"></td>
                    <td width="48%"><input type="password" name="textfieldName" 
                        size="18" maxlength="24"></td>
                </tr>
                <tr>
                    <td width="48%"><input type="submit" class="button"
                         name="submitButtonName" value="anmelden"></td>
                        <td width="15"></td>
                        <td width="48%"><input type="submit" class="button"
                             name="submitButtonName" value="einloggen"></td>
                </tr>
            </table>
        </form>
</body>
</html>
 
In diesem Beispiel wird beim Überfahren mit der Maus die Hintergrundfarbe getauscht.

CSS-Code:
Code: 
input.button
{
font-size: 7pt;
background-color: #ff1493;
border: solid 1px;
width: 100%;
cursor: pointer;
}

input.button-hover
{
font-size: 7pt;
background-color: #ffffff;
border: solid 1px;
width: 100%;
cursor: pointer;
}
HTML: 
<input type="submit" class="button" name="submitButtonName" value="anmelden" onmouseover="this.className='button-hover'" onmouseout="this.className='button'">

<input type="submit" class="button" name="submitButtonName" value="einloggen" onmouseover="this.className='button-hover'" onmouseout="this.className='button'">
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück