Alright, so when I wrote this post the first time it got rendered all sorts of crazy because I didn't realize that by inserting actual code into my post it would render it as if it were part of the actual page. So... let's try this again.
Over the past couple of days I decided that it would be nice to learn if it was possible to add styles and visual changes to the buttons used on forms in websites. Everyone has seen those buttons before. They are most common on logins, comment forms, contact information forms, or updating profiles on sites. The problem is that the default browser styling for buttons is incredibly bland and boring.
I wanted to see if I could figure out how to make them more visually appealing and exciting. As it turns out, it is entirely possible, but not as easy as you would normally think.
There are two ways of putting a button into a form. The first is by using a standard submit input and the second is to use the button tags with the appropriate attributes. If you use the first method you can do some styling, but the amount of control you have is not nearly as impressive. It is impossible to add an icon or image to a submit input (at least from what I have found so far) and the other styling options are somewhat limited.
However, if you use the button tags you can easily add an icon, adjust the margins or paddings as you wish and deal with all sorts of background colors or borders. The advantage here is that you can make some very nice looking buttons without needing to generate a truckload of "button images" in Photoshop or some other image creation software.
It was a fun experience trying to figure out how to make the buttons work the way I wanted and when I finally had some success I decided that I may try and incorporate them into the Writers Camp website I've been working on for a BYU professor by the end of the summer.
8 years ago
Posts
