We explain the improvements that can be obtained by the use of style sheets in the creation of forms and, more specifically, the submission buttons.
Cascading Style Sheets (CSS) are undoubtedly one of the most useful tools that we can use on our web pages. They allow us to define the appearance with which each and every one of the elements of a web page will be presented, thus achieving the desired separation between data and presentation, so sought after by developers.
Using CSS we can significantly improve the appearance of our form buttons, as long as the browser used by our visitor supports the application of styles to these elements, that is, all 5th and 6th generation browsers.
Reference: You have a Web Development that will teach you how to use this technology to create more attractive and precise pages.
As an example, we are going to modify the external appearance of the button on the previous page, giving it a blue background, removing the 3D aspect and putting the text in white, with a 10-pixel Verdana font. We will also define its exact size. The necessary code will be:
Whose result is the following:
Analyzing the above code a bit, we see that we have defined a style class, .button, which defines the desired attributes for our button. The class is defined by establishing, within the tags, the name of the class preceded by a point, some keys and within them the desired attributes with their values.
In this way we can set the specific appearance of our buttons, having the freedom to define as many classes as we need.
The advantages of this method are the total configuration of appearance and that we still have a standard submit button (so if we press the Enter key the form data will be sent). The downsides are that these button styling features are not supported by Netscape 4x and we still have the rectangular button limitation.
Facebook Comments
Disqus