Menu
For my application, I wanted to style the submit buttons nicely. With normal CSS, I managed to get it to look good in Firefox, and horrible in IE. Then I saw this blog entry:
http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/
Using that technique you get gorgeous buttons, in pretty much all browsers. However, there are also a few accessibility issues:
Basically what I want is perhaps the impossible: The quality of the styling as seen in the blog entry, yet implemented using normal elements so that I get normal behavior.
Do I really have to chose between dirty hacks or poor styling?
Every button styling tutorial that I have seen so far has sub optimal results in IE :(
375
Definition and Usage. The <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i> , <b> , <strong> , <br> , <img> , etc.). That is not possible with a button created with the <input> element!
To create text buttons first, we create simple buttons in HTML using a button tag. After creating the button we apply CSS and change its properties to make it look like a text button. To make it look like a text button we remove its default border and background.
The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute. If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit"> .
Do I really have to chose between dirty hacks or poor styling?
No, you could use Javascript like the rest of us. Load in your standard form (complete with submit-button), and then use neatly-written Javascript to dynamically "fix" some of the ugly elements. I'd suggest evaluating the jQuery framework for this type of thing if you wish to use clean code, and get cross-browser support.
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
