HTML Button Design with CSS?

Question

my problem is the following:

This is a part of my HTML-Code:

<form method='GET' name='auftragaufgeben' action='AuftragAufgeben'> <input type='submit' name='auftragaufgeben2' value='Auftrag aufgeben'> <input type='hidden' name='logged' value='logged'> </form>

No i want a design for the button with the help of css. This is the code:

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

I found that the declaration of the class in the button tag should work, for example this:

<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>

But this doesn't change anything. How can change the layout of the button to the picture i declared in the CSS part? Or is there another way to start the form when i click the picture?

Kind regards

No, i tried input type = "button". How do i have to do that with <button>? — Materno
– Materno, Commented Jun 18, 2012 at 22:38

MaVRoSCy · Accepted Answer · 2012-06-18 22:47:49Z

in your css, the code a.auftragaufgeben and a.auftragaufgeben:hover are for styling a link element, not the button.

try

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

UPDATE

Your final html code should look like this:

<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>

I tried this again the declaration of the class after changing the CSS to your code again. Still no change :( Edit: Another information: Im doing this in the HTML-output in a Java Servlet! Maybe there is a problem?
This is working in the HTML Code of a .html! I will try that in the servlet!

Collectives™ on Stack Overflow

HTML Button Design with CSS?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related