For every programmer, providing users with a unified style interface is an unchanging requirement. However, it is particularly difficult to achieve this style unification on web pages, because there are differences in the way different operating systems and browsers express web page content, and this difference is almost irregular. This problem is particularly prominent in the process of processing form elements. What makes many people helpless is the issue of unified performance standards of Submit buttons.
For example, the input tag with type=submit attribute either looks very ugly in different browsers (in Firefox), or has one kind of flaw (in Internet Explorer), or even acts very rigid (in Safari). The solution to this problem is usually to set the input property to image and then design a button image by yourself. But we have to add a lot of extra annoying work every time we need to use the buttons. Therefore, we need a better solution, a more flexible and meaningful approach for designers. Fortunately, this method already exists in reality, and what we need is to do a little more work. Friends, please allow us to introduce to you our cute little friend, classmate <button>!
Input VS Button
Here is the submission button label you are using:
<input type=submit value=Submit />
Their performance styles in different browsers are as follows:
And when we use <button> to create the button as above:
<button type=submit>Submit</button>
They are expressed in the following style:
These buttons are not different from the buttons we created above in their running and presentation behavior. In addition to using them to submit the form as, you can also set them to be unavailable, add shortcuts or set a tabindex, etc. Fortunately, in addition to the different expression styles, Safari supports these functions (compared with input buttons, the button button in Safari lacks the liquid effect on the surface). The coolest function of the <button> tag is that we can place some useful HTML elements inside it, such as adding images using the following code:
<button type=submit><img src= alt= /> Submit</button>
Their appearance in the browser is as follows:
Not bad. In fact, according to the definition of W3C, the <button> element came into being to solve these performance 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 solution for this, and 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 don't even know the existence of this element. Before I decided to replace Wufoo with the button element (a network product of this article, dudo note), I have to be sure that this tag and CSS can meet the following needs:
Requirements:
1. They must have the appearance of buttons
2. There are the same expression styles in different browsers
3. The styles applied in the button can also be used on hyperlinks (because the interactions in Wufoo always use form submission method and link contact to send Ajax method, they may often be close together, so I need them to have the same expression style)
4. The tag can be flexible and easy to modify under different circumstances
5. For events that occur during information transmission, you can effectively distinguish them by icons and colors.
Faced with the above problems, I first wrote some CSS and then solved the cross-browser problem. Next we will see:
Final resultThere is nothing to make a fuss about this, it is very simple, but it is very effective. The reason I like to use this method and handle buttons is because I don't have to start Photoshop creation one by one to create 10,000 icons. If we look at the code carefully, you will find that the two buttons behind are actually two links.
<div class=buttons>
<button type=submit class=positive>
<img src=/images/icons/tick.png alt=/>
Save
</button>
<a href=/password/reset/
<img src=/images/icons/textfield_key.png alt=/>
Change Password
</a>
<a href=# class=negative>
<img src=/images/icons/cross.png alt=/>
Cancel
</a>
</div>
The purpose of this is because many actions in web applications are event (REST) driven, so sending user requests through a specific URL can initialize these actions. Using styles that can be applied on both elements makes our style unification more flexible when maintaining the interaction caused by Ajax and standard submit buttons.
Now you might ask, why do I leave the alt attribute of the image element blank? alt is a necessary attribute of the img element. It is used to explain the content of the image, but there is no relevant description of the image here, which is indeed a bit confusing. However, unlike missing attributes, the empty attribute value is completely in line with the standard. He told the browser that these images represent some completely negligible information, which also prevents the browser from not being able to find the next button due to the occlusion of the prompt information. Since the icons here are completely redundant, we would rather not waste users' time viewing this icon that is used entirely to achieve unified interface style.
CSS StylesheetMost of the CSS content used to control these button styles is very intuitive. A slight difference in different browsers will lead to the application of different padding values for them in the code below. Fortunately, all of this is completely possible.
/* 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 there are some bugs in Internet Explorer when rendering long buttons. You can find this information on Jehiah.cz, but in the above CSS code, we will avoid the problem to a certain extent by declaring the values of width and overflow.
Add a little color to the buttonIn Wufoo, we set the hover value of the neutral action (here, the author calls the change password and other actions as neutral action, the confirmation and submission type as positive action, and the abandonment and cancellation type as negative action) to blue, and the positive action and negative action are set to green and red respectively. The following style code uses different colors to distinguish between adding, saving, and canceling, and deleting a type of negative actions. It feels pretty good, of course you can also choose the color you like to use.
/* 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:#ffff;
}
/* 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:#ffff;
}
/* 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:#ffff;
}
SummarizeFinally, this is just a solution we designed to deal with the needs in Wufoo, but it performed well with our efforts. But that's not the only way, you can find more interesting ways to turn buttons into rounded corners or even more colorful. Since almost any other element can be placed between the <button> tags, you can also create a truly good-looking rounded three-dimensional button by inserting the <span> tag and following the latest methods provided by Alex Griffioen. To be honest, I hope this is just the beginning for all designers working on reusing the interface of the program. Anyway, I hope you can think more about it before opening Photoshop's input button and take a look at this almost forgotten <button> tag, maybe it will surprise you.
Appendix:<button> element in HTML4.0/xhmtl1.0
Definition and usageDefine a button. Inside the button element, you can place content, such as text or images. This is the difference between this element and the buttons created with the input element.
The <button> control provides more powerful features and richer content than <input type=button>. All content between the <button> and </button> tags is the content of the button, which includes any acceptable body content, such as text or multimedia content. For example, we can include an image and related text in the button, and use them to create an attractive markup image in the button.
The only element that is prohibited is image mapping, because its mouse- and keyboard-sensitive actions can interfere with the behavior of form buttons.
Selectable properties Attribute value description DTDdisabled disabled Disabled Disable this button. STF
namebutton_name specifies the unique name of this button. STF
type* button
* reset defines the type of button. 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 properties:onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup