HTML button button border style and color

The border style and color of the HTML button button can be modified. It is difficult to design a beautiful button style with basic HTML syntax, but it can be easily done through CSS . In this article, the border style and color of the HTML button button In the introduction of the modification, we will use the border-style and border-color of the CSS border property to make it. Of course, the width and height of the button itself must also be used together. This technique can be used for both button and submit buttons, but different browsers may have a little difference, which is related to the browser itself. When designing the css effect of the button, you usually need to use a few more browsers Device test. Example 1: HTML button button border style and color

<input type="button" value="I am a button" style="width:120px;height:40px;border:2px #9999FF dashed;">
<input type="button" value="I am a button" style= "width:120px;height:40px;border:3px orange double;">
<input type="button" value="I am a button" style="width:120px;height:40px;border:2px blue none;">

Present results

  

In example 1, we have prepared three buttons with different border styles and border colors. The width and height are the same. The difference is that the border property of CSS is different. The border thickness of the first button is 2px, and the border color is #9999FF, The border style is dashed, and the second border uses an orange double solid line (double) style. Although the border thickness of the third button is 2px, it doesn’t really matter because the border style The property is set to none, so the button border will not be displayed at all. If you are interested in the CSS border syntax, you can refer to these in-depth introductions, especially the border-style has many three-dimensional effect properties that are quite good.

• CSS border
• CSS border-color border color
• CSS border-style

If just modifying the border color and style of the button cannot meet the overall style of the webpage, just modify the background color of the button by the way!

Example 2: Modify it together with the button background color

<input type="button" value="I am a button" style="width:120px;height:40px;border:2px #9999FF dashed;background-color:pink;">
<input type="button" value=" I am a button" style="width:120px;height:40px;border:3px orange double;background-color:pink;">
<input type="button" value="I am a button" style="width:120px; height:40px;border:2px blue none;background-color:pink;">

Present results

  

Example 2 continues the code of Example 1, adding the background-color property and adding a background color for the button. Here to make the example a bit more concise, so the background color is presented in pink, you can also modify it to For other different background colors, to learn more about how to modify the background color of CSS, please refer to these two articles.

• CSS background-color background color
• CSS background

After reading the above introduction, you should have a more in-depth understanding of the border style, color and background image of the HTML button button. You will not need to use the default monotonous button style in the future, but you should still pay attention to the differences in the effects presented by browsers, especially IE is often different. If the style is too different, it must be revised.