Note: Someone has translated this article and re-recognized the button tag. However, it seems that many of them are worthy of scrutiny and are not easy to understand. Therefore, I re-translated this article based on my personal learning experience. Original article: particle tree. comfeaturesrediscovering-the-button-element provides a style for each program designer
Note:Someone has translated this article and re-recognized the button tag, but I feel that many of them are worth a lot of scrutiny and are not very easy to understand. Therefore, I re-translated this article based on my personal learning experience.
Original English:Http://particletree.com/features/rediscovering-the-button-element/
For each program designer, providing users with a unified interface is a constant requirement. However, it is extremely difficult to unify the style on the web page, because different operating systems and browsers have different ways of expressing the content on the web page, and this difference is almost irregular. This problem is particularly prominent in the Process of Processing Form elements. What makes many users helpless is the standard unification of the "Submit" button.
For example, the input tag with the attribute "type =" submit "either looks very ugly in different browsers (in Firefox) or has such a defect (in Internet Explorer ), even very rigid (in Safari ). The solution to this problem is to set the input attribute to image and then design a button image by yourself. However, we have to add a lot of additional annoying work every time we need to use a button. Therefore, we need a better solution, a more flexible and meaningful Method for designers. Fortunately, this method already exists, and we need to do a little more work. Dear friends, please allow us to introduce to you our lovely little pot friend. Students!
Input VS Button
The following is the submit button tag you are using:
Their display styles in different browsers are as follows:
And we use Create the above button time code:
Submit
Their style is as follows:
These buttons are no different from the buttons we created above in terms of running and displaying behavior. In addition to using them to submit forms, you can also set them to unavailable, add shortcuts or set a tabindex. Fortunately, in addition to different display styles, Safari supports these features (compared with the input button, the button in Safari lacks the surface liquid effect ). The coolest feature of tags is that we can place some useful HTML elements inside them. For example, we can add images using the following code:
Submit
Their appearance in the browser is as follows:
Not bad. In fact, according to W3C definition, Elements emerged to solve these differences.
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. for example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
The Button Element-W3C
Therefore, we need to find a design scheme for this purpose. Fortunately, the Internet with massive data can provide us with some useful help to solve this problem. This is indeed very convenient, but unfortunately, designers and website developers do not even know the existence of this element. Before I decide to replace Wufoo with the button element (dudo note, a network product prepared by the author), I must be sure that the tag and CSS can meet the following requirements:
Requirements:
1. They must have a button appearance
2. Different browsers have the same performance style
3. The style applied in the button can also be used on the hyperlink (because the interaction in Wufoo is always implemented in the Form submission method and the link triggering Ajax method, they may often be close together, so I need them to have the same performance style)
4. labels can be flexibly and easily modified under different circumstances
5. Use icons and valid colors for events during information transmission.
In the face of the above problems, I first wrote some CSS and then solved the cross-browser problem. Next we will see:
Final Result
This is nothing to worry about, he is very simple, but it is very effective. I like this method and the processing button because I don't have to start Photoshop one by one to create 10000 icons. If you observe the Code carefully, you will find that the two buttons are actually two links.
Save
Change Password
Cancel
This is because many actions in web applications are event-driven (REST). Therefore, you can initialize these actions by sending user requests through a specific URL. Styles that can be applied on both elements make it more flexible to maintain the style Unification means for interactions caused by Ajax and standard commit buttons.
Now you may ask, why do I need to leave the alt attribute of the Image Element blank? Alt is a necessary attribute of the img element. It is used to interpret the image content, but there is no image description here, which is indeed a bit confusing. However, unlike the "missing" attribute, the attribute value "null" fully complies with the standard and tells the browser that these images represent completely negligible information, this also makes the viewer unable to find the next button because of the occlusion of the prompt information. Because the icons here are completely redundant, we would rather not waste the user's time to view the icons that are used to achieve unified interface style.
CSS style sheets
Most of the CSS content used to control these button styles is intuitive. A slight difference in different browsers will lead to the application of different padding values in the code below. Fortunately, all of this is completely achievable.
/* BUTTONS */
. Buttons a,. buttons button {
Display: block;
Float: left;
Margin: 0 7px 0 0;
Background-color: # f5f5f5;
Border: 1px solid # dedede;
Border-top: 1px solid # eee;
Border-left: 1px solid # eee;
Font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
Font-size: 100%;
Line-height: 130%;
Text-decoration: none;
Font-weight: bold;
Color: #565656;
Cursor: pointer;
Padding: 5px 10px 6px 7px;/* Links */
}
. Buttons button {
Width: auto;
Overflow: visible;
Padding: 4px 10px 3px 7px;/* IE6 */
}
. Buttons button [type] {
Padding: 5px 10px 5px 7px;/* Firefox */
Line-height: 17px;/* Safari */
}
*: First-child html button [type] {
Padding: 4px 10px 3px 7px;/* IE7 */
}
. Buttons button img,. buttons a img {
Margin: 0 3px-3px 0! Important;
Padding: 0;
Border: none;
Width: 16px;
Height: 16px;
}
Another problem is that Internet Explorer has some bugs in rendering long buttons. You can find this information on Jehiah. cz, but in the CSS code above, we can avoid the problem to some extent by declaring the width and overflow values.
Add a color to the button
In Wufoo, we are a neutral action (here, the author calls an action like change password as a neutral action and calls an action like "OK" and "Submit" as a forward action, the hover value of a negative action is set to blue, and the positive and negative actions are set to green and red respectively. In the following style code, we use different colors to differentiate positive actions such as "add" and "save" and negative actions such as "cancel" and "delete. It feels good. You can also choose the color you like.
/* STANDARD */
Button: hover,. buttons a: hover {
Background-color: # dff4ff;
Border: 1px solid # c2e1ef;
Color: #336699;
}
. Buttons a: active {
Background-color: #6299c5;
Border: 1px solid #6299c5;
Color: # fff;
}
/* POSITIVE */
Button. positive,. buttons a. positive {
Color: #529214;
}
. Buttons a. positive: hover, button. positive: hover {
Background-color: # E6EFC2;
Border: 1px solid # C6D880;
Color: #529214;
}
. Buttons a. positive: active {
Background-color: #529214;
Border: 1px solid #529214;
Color: # fff;
}
/* NEGATIVE */
. Buttons a. negative, button. negative {
Color: # d12f19;
}
. Buttons a. negative: hover, button. negative: hover {
Background: # fbe3e4;
Border: 1px solid # fbc2c4;
Color: # d12f19;
}
. Buttons a. negative: active {
Background-color: # d12f19;
Border: 1px solid # d12f19;
Color: # fff;
}
Summary
The last thing we want to talk about is that this is only the solution we designed to address the needs of Wufoo, but it did a good job with our efforts. But this is not the only method. You can find more interesting ways to turn the button into a rounded corner or even more colorful. Because You can place almost any other element between tags, so you can also create a really nice rounded corner button by inserting tags and following the latest method provided by Alex Griffin ioen. To be honest, I hope this is just the beginning for all the designers who work hard to reuse the interface of the program. In any case, I hope you can think more before opening the Photoshop input button and take a look at this almost forgotten Tag, maybe he will surprise you.
Appendix:
In HTML4.0/xhmtl1.0
Element
Definition and usage
Define a button. Inside the button element, you can place content, such as text or images. This is the difference between this element and the button created using the input element.
Controls andIt provides more powerful functions and richer content. AndAll content between tags is button content, including any acceptable body content, such as text or multimedia content. For example, you can include an image and related text in a button and use them to create an attractive labeled image in the button.
The only prohibited element is image ing because its mouse-and keyboard-sensitive actions interfere with form buttons.
Optional attributes
Attribute value description DTD
Disable this button. STF
Namebutton_name specifies the unique name of the button. STF
Type * button
* Reset defines the button type. STF
* Submit
Value some_value specifies the initial value of the button. This value can be modified by the script. STF
Standard attributes:
Id, class, title, style, dir, lang, xml: lang, accesskey, tabindex
Event attributes:
Onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
