使用CSS的HTML按钮设计?

Mat*_*rno 3 html css button

我的问题如下:

这是我的HTML代码的一部分:

<form method='GET' name='auftragaufgeben' action='AuftragAufgeben'>
    <input  type='submit' name='auftragaufgeben2' value='Auftrag aufgeben'>
    <input type='hidden' name='logged' value='logged'>
</form>
Run Code Online (Sandbox Code Playgroud)

不,我想在css的帮助下设计按钮.这是代码:

a.auftragaufgeben {
display: block;
background-image: url(AuftragAufgeben.png);
width: 467px;
height: 104px;
}

a.auftragaufgeben:hover {
background-image: url(AuftragAufgeben_Hover.png);
}
Run Code Online (Sandbox Code Playgroud)

我发现按钮标记中的类声明应该有效,例如:

<form method='GET' name='auftragaufgeben' action='AuftragAufgeben'>
<input  class="auftragaufgeben" type='submit' name='auftragaufgeben2' value='Auftrag aufgeben'>
    <input type='hidden' name='logged' value='logged'>
</form>
Run Code Online (Sandbox Code Playgroud)

但这并没有改变任何事情.如何将按钮的布局更改为我在CSS部分中声明的图片?或者,当我点击图片时,是否有另一种方式来启动表单?

亲切的问候

MaV*_*SCy 6

在你的css中,代码a.auftragaufgebena.auftragaufgeben:hover用于设置链接元素的样式,而不是按钮.

尝试

.auftragaufgeben {
    display: block;
    background-image: url(AuftragAufgeben.png);
    width: 467px;
    height: 104px;
}

.auftragaufgeben:hover {
    background-image: url(AuftragAufgeben_Hover.png);
}
Run Code Online (Sandbox Code Playgroud)

UPDATE

您的最终HTML代码应如下所示:

<html>
    <head>
        <style>
            .auftragaufgeben {
                display: block;
                background-image: url(AuftragAufgeben.png);
                width: 467px;
                height: 104px;
            }
            .auftragaufgeben:hover {
                background-image: url(AuftragAufgeben_Hover.png);
            }
        </style>
    </head>
    <body>
        <form method='GET' name='auftragaufgeben' action='AuftragAufgeben'>
            <input  class="auftragaufgeben" type='submit' name='auftragaufgeben2' value='Auftrag aufgeben'>
            <input type='hidden' name='logged' value='logged'>
        </form>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)