The most basic HTML button can be made by using the <button> tag. This has the advantage of simple syntax and is supported by almost all browsers, but when your web page needs a special art design, a simple button may not be compatible Beautiful version, so at this time, you can add some styles to decorate, and these styles are usually CSS syntax. You can find many useful syntax in our CSS category. This article simply makes a few HTML The example of button style is for your reference.
Example 1: Modify button background color and text color through style
<button type="button" style="background-color:blue;color:white;">I am the button</button>
In this example, we use style to declare the grammar of the style, where background-color:blue means that the background color is blue, and color:white means that the text is white. You can decide these colors by yourself. Match.
Example 2: Modify the button border through style
<button type="button" style="background-color:blue;color:white;border:5px #cccccc solid;">
I am the button</button>
Continuing the button of example 1, we added the syntax of the border, border:5px #cccccc solid This syntax represents that the border width is set to 5px, the border color is set to gray, and the style of the border line is solid, so Come on, this button has a gray border!
Example 3: Modify button background image through style
<button type="button" style="background-image:url(Image URL);width:80px;height:25px;">
I am the button</button>
Example 3 is a bit more special. We directly change the background color to the way the image is presented. In order to fully integrate the size of the button with the image, we also add the width and height settings. With this technique, you can do it yourself Design a button background image that blends with web style.
Post a Comment
0 Comments