Differences between the button label and input type = button in the CSS button style

Document directory

• Input vs button

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 webpage, because the webpage content is poorly displayed in different operating systems and browsers.

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 me to introduce to you our lovely friend <button>!

Input vs button

The following is the submit button tag you are using:

1. <Input type = '"Submit" 'value =' "Submit" '>

Their display styles in different browsers are as follows:

However, we use <button> to create the above button time code:

1. <Button> submit </button>

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 ). <Button> the coolest feature of a tag is that we can place some useful HTML elements inside it. For example, we can add images using the following code:

1. <Button> submit </button>

Their appearance in the browser is as follows:

Not bad. In fact, according to W3C definition, the <button> element came into being 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 (a network product prepared by the author of this article), 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.

 
<DIV class='"buttons"'>    
    <BUTTON class='"positive"'>    
        <IMG style="_width: true" alt='""/' src='"/images/icons/tick.png"'>    
        Save     
    </BUTTON>    
    
    <A href='"/password/reset/"'>    
        <IMG style="_width: true" alt='""/' src='"/images/icons/textfield_key.png"'>    
        Change Password     
    </A>    
    
    <A class='"negative"' href='"#"'>    
        <IMG style="_width: true" alt='""/' src='"/images/icons/cross.png"'>    
        Cancel     
    </A> 
</DIV>   

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 <button> labels can be placed almost with any other element, you can also insert tags and create a really nice-looking three-dimensional button with rounded corner according to 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 about the almost forgotten <button> tag before opening the Photoshop input button. Maybe it will surprise you.

 

Appendix:
<Button> element in html4.0/xhmtl1.0

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.

Compared with <input type = "button">, the <button> Control provides more powerful functions and richer content. All content between the <button> and </button> labels is the content of the button, 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
Name button_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

 

Address: http://ipmtea.net/css/201006/16_5.html